设置克隆元素 jQuery 的第 n 个子元素 (n) 值

Question

我想克隆一个html元素并为其子元素设置值。我的 html 元素是这样的。

<div id="avator" class="avator" style="display:none">
<label>[e-mail]</label>
<i class="fa fa-close"></i>
</div>

我想克隆它并更改克隆的 css，并为标签设置一些值。我的 jQuery 法典

$(document).ready(function () {
$("#addEmailBtn").click(function () {
var email = $("#emailInput").val();
var $clone = $("#avator").clone();
$clone.children(':nth-child(0)').val(email);
$clone.css("display", "block");
$clone.appendTo("#participantsDiv");
});
});

但它没有在标签上设置值。

Answer 1

标签没有值，这仅适用于输入元素。使用.text().

你不需要:nth-child(1)，只需使用.eq(0)即可。

$(document).ready(function() {
$("#addEmailBtn").click(function() {
var email = $("#emailInput").val();
var $clone = $("#avator").clone();
$clone.children().eq(0).text(email);
$clone.show();
$clone.appendTo("#participantsDiv");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="avator" class="avator" style="display:none">
<label>[e-mail]</label>
<i class="fa fa-close"></i>
</div>
Email: <input id="emailInput" type="text">
<input type="button" id="addEmailBtn" value="Add email">
<br>
Participants:
<div id="participantsDiv"></div>