更新

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

您可以使用$(this)获取源元素，并使用closest()获取事件源类wrapper的父级。

<强> Live Demo

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

Answer 2

试试这个：

$(".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')将获得与 .wrapper 选择器匹配的第一个元素，方法是测试元素本身并遍历DOM树中的祖先并确保非直接后代没有被选中。

Answer 3

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

演示--> http://jsfiddle.net/aGC5s/6/

Answer 4

http://jsfiddle.net/aGC5s/3/

  $(".wrapper .button").click(function (event) {
      event.preventDefault();

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


  });

Answer 5

您可以使用this和closest

代码：

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

工作小提琴：http://jsfiddle.net/aGC5s/10/

Answer 6

这是我的解决方案：

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

首选在您的包装器节点上委派事件，尤其是您想要编辑它！

还要记住取消释放内存。

更新

使用bind $(this)引用委托节点（感谢Jack）。这个解决方案更好，因为不需要在DOM中搜索。

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

Answer 7

使用$(this)和.parent()查看此fiddle

Answer 8

我想你想要这个

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

DEMO.

或者，也许这一个

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

DEMO.

仅将内容附加到一个div

8 个答案:

更新