【问题标题】：Append to a div with a recurring class附加到具有重复类的 div
【发布时间】：2013-08-31 22:03:39
【问题描述】：

我有一段 JS，通过单击按钮将以下内容附加到 Web 表单中。当点击 div .remove 时，最接近的 new-attribute div 被删除。它工作正常。

<div class="new-attribute">
    <h3>New Attribute</h3>

    <label for="attributeName3">Name:</label>
    <input class"attribute"="" type="text" name="attributeName3">

    <label for="attributeType3">Type:</label>
    <select id="t" class="attribute" name="attributeType3">
        <option value="text" selected="">Text</option>
        <option value="checkbox">Checkbox</option>
        <option value="select-list">Select Option List</option>
        <option value="notes">Notes</option>
    </select>

    <div class="option"></div>
    <div class="remove">Delete</div>
</div>

在 div“选项”中，我有代码在选择输入中选择“选择列表”时添加另一个表单字段。这没用。我不知道为什么。没有变量名发生冲突。我不在了，我不应该给选择一个 id，因为它是经常性的，我只想让它在合规之前让它工作。

这是我遇到问题的 Js：

//select temp
var select="<div class=\"new-option\">"
    + "<h3>new option</h3>"
    + "<label for=\"attributeName"+count+"\">New otion:</label>"
    + "<input class\"attribute\" type=\"text\" name=\"attributeName"+count+"\">"
    + "</div>";

//get value of select
$('#t').change(function() {
    var selectVal = $('#t :selected').val();
    if (selectVal == "select-list") {
        $(this).closest('.option').append(select);
    }   
});

代码适用于$(select).appendTo('.option'); 但是，它将代码附加到页面上“选项”类的每个实例。我只希望它附加到当前或最接近的。

提前谢谢你

【问题讨论】：

与此问题没有直接关系，但您似乎在这里缺少= <input class\"attribute\"（select 赋值）

标签： javascript jquery html css

【解决方案1】：

问题是因为closest() 在 DOM 中查找与选择器匹配的最近的父元素，但 .option 是 #t 的兄弟。尝试改用next()：

$('#t').change(function() {
    if ($(this).val() == "select-list") {
        $(this).next('.option').append(select);
    }   
});

【讨论】：

先生，您可以使用this.value 代替$(this).val()

【解决方案2】：

试试这个

http://jsfiddle.net/7WC4G/1/

$('#bob').change(function(){
    $('#nuform').append('<p>your new form here</p>');
});

【讨论】：

【解决方案3】：

避免使用 next, prev，因为如果您更改顺序，它可能会失败。而是尝试在您的代码中使用兄弟姐妹而不是最接近的：

$(this).siblings('.option').append(select);

在此处了解更多信息：http://api.jquery.com/siblings/

【讨论】：