【问题标题】：Append content to one div only仅将内容附加到一个 div
【发布时间】：2013-05-28 00:42:16
【问题描述】：

我正在尝试仅将内容附加到特定 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>');
});

【问题讨论】：

现场演示：jsfiddle.net/aGC5s

标签： jquery

【解决方案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') 将获得第一个匹配 .wrapper 选择器的元素，方法是测试元素本身并向上遍历其在 DOM 树中的祖先，并确保非直接后代不是已选中。

【讨论】：

这假定 .wrapper 始终是父级，但使用的选择器允许非直接后代。
是的，最好使用 .parents().first() 或最接近的() 来减少静态 html 代码
有一个问题，一旦我点击按钮两次或更多，内容就会不断重复示例（此内容将被添加此内容将被添加此内容）。您可以通过多次单击按钮来测试它。 jsfiddle.net/aGC5s/7

【解决方案2】：

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

Live Demo

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

【讨论】：

但点击的包装器并不总是 :eq(0)

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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


  });

【讨论】：

【解决方案5】：

您可以使用this 和closest

代码：

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

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

【讨论】：

【解决方案6】：

这是我的解决方案：

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

更喜欢在你的包装节点上委托事件，尤其是你想编辑它！

还要记住调用释放内存。

更新

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

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

【讨论】：

$(this) 应该与event.delegateTarget 相同。
$(this) 在使用 event.currentTarget 时是 .on() (api.jquery.com/on/#event-handler) ！但是使用 bind 更好，因为在这种情况下，$(this) 是委托节点。
呵呵，没关系； event.delegateTarget 指向.wrapper 当然是正确的:) +1
谢谢！您的第一条评论是正确的，假设直接父母 .wrapper 不是一个好主意。但我认为向后看也不太好。

【解决方案7】：

使用$(this) 和.parent() 见fiddle

【讨论】：

这假定.wrapper 始终是父元素，但选择器允许匹配.button 的非直接后代元素。

【解决方案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.

【讨论】：