点击class为myLink的链接，如何仅向对应divTwo元素追加内容？

嘿，我懂你的困扰啦——现在你的代码每次点击都会把内容加到所有.divTwo的fieldset里，而你想要的是点击哪个"CLICK TO APPEND"链接，就只往它对应的那个.divTwo里追加内容，对吧？

问题出在哪？ #

你原来的选择器$(".wrap > .divTwo > fieldset")会选中页面上所有符合这个层级结构的fieldset元素，所以不管点哪个链接，所有.divTwo里都会被追加内容。

正确的解决方案 #

我们可以利用DOM的层级关系，从当前点击的链接出发，精准定位到它对应的.divTwo容器。修改后的代码如下：

$(document).ready(function(){
  $('.myLink').click(function(e) {
    // 阻止a标签的默认跳转行为
    e.preventDefault();
    // 精准定位对应fieldset并追加内容
    $(this)
      .closest('.divOne') // 找到当前链接所在的那个.divOne父元素
      .next('.divTwo')    // 找到这个.divOne后面紧邻的.divTwo兄弟元素
      .find('fieldset')   // 在.divTwo里找到目标fieldset
      .append("<p>hello world</p>"); // 追加内容
  });
});

代码解释 #

• e.preventDefault()：因为你的链接是<a href="#">，默认点击会跳转到页面顶部，加上这行可以阻止这个默认行为，让点击只执行我们的追加操作。
• closest('.divOne')：从当前点击的.myLink元素向上查找，找到最近的带有.divOne类的父元素，确保我们拿到的是包含这个链接的那个特定.divOne。
• next('.divTwo')：获取刚才找到的.divOne的下一个兄弟元素中带有.divTwo类的，这就是和当前链接对应的目标容器。
• find('fieldset')：在目标.divTwo里定位到要追加内容的fieldset，最后用append()添加"hello world"。

这样修改后，每个链接点击后就只会往自己对应的.divTwo里追加内容啦～

内容的提问来源于stack exchange，提问作者Russel Riehle