jquery - 仅将内容附加到一个 div

Question

我试图仅将内容附加到特定的 div，而不影响其他 div。

如何只将内容附加到一个div而不显示其他div中的内容？ 这是我的代码的现场演示:http://jsfiddle.net/aGC5s/

这是 jquery 代码:

$(".wrapper .button").click(function(event) {
   event.preventDefault();
   $('.wrapper').append('<span>   This content will be added  </span>');
});

Answer 1

试试这个:

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).parent().append('<span>   This content will be added  </span>');
});

FIDDLE DEMO

使用您的代码:

$('.wrapper').append('<span>   This content will be added  </span>');

将新内容附加到所有具有 .wrapper 类的 div 中。我们首先需要使用 this 获取当前点击事件范围内的按钮。之后，我们将使用 $(this).parent() 获取其父级，然后仅将新内容附加到该特定 div。

更新

更好的代码是使用 closest()这里:

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).closest('.wrapper').append('<span>This content will be added</span>');
});

现在，closest('.wrapper') 将通过测试元素本身并向上遍历其在DOM 树并确保不选择非直接后代。