1

我试图仅将内容附加到特定的 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>');
});
4

8 回答 8

2

尝试这个：

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

小提琴演示

使用您的代码：

$('.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>');
});

现在，将通过测试元素本身并遍历其在 DOM 树中的祖先并确保不选择非直接后代来获取与.wrapperclosest('.wrapper')选择器匹配的第一个元素。

于 2013-05-27T15:46:36.547 回答
2

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

现场演示

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).closest('.wrapper').append('<span>   This content will be added  </span>');
});
于 2013-05-27T15:45:14.127 回答
1

您可以使用this和closest

代码：

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

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

于 2013-05-27T15:52:13.360 回答
1

这是我的解决方案：

$(".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>');
});
于 2013-05-27T15:57:33.580 回答
1 
$(this).closest('.wrapper').append('<span>This content will be added</span>');

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

于 2013-05-27T15:46:42.760 回答
1

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

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

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


  });
于 2013-05-27T15:46:47.117 回答
0

我想你想要这个

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

演示。

或者，也许这个

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

演示。

于 2013-05-27T15:50:21.913 回答
0

使用$(this)并.parent()查看这个小提琴

于 2013-05-27T15:47:34.110 回答