Question

我尝试使用其类名在div中附加一些内容。用户点击元素后必须拍摄该事件。

我的结构是这样的：

<div class="wrap">
    <div class="divOne">
        <div class="divOneItem"><a class="myLink" href="#">CLICK TO APPEND</a></div>
    </div>
    <div class="divTwo">
        <fieldset>
            <legend>CONTENT TO APPEND:</legend>
        </fieldset>
    </div>

    <div class="divOne">
        <div class="divOneItem"><a class="myLink" href="#">CLICK TO APPEND</a></div>
    </div>
    <div class="divTwo">
        <fieldset>
            <legend>CONTENT TO APPEND:</legend>
        </fieldset>
    </div>
</div>

Foreach＆＃34;点击追加＆＃34;链接，我只想附加在其各自的＆＃34; divTwo＆＃34; a＆＃34;你好世界＆＃34;

标签！

以下代码附加在每个＆＃34; divTwo＆＃34; DIV！

$(document).ready(function(){
    $('.myLink').click(function() {
        $(".wrap > .divTwo > fieldset").append( "<p>Test</p>" );
    });
});

Answer 1

解决方案1 

使用您的html，您可以执行类似的操作以获得快速解决方案：

$(document).ready(function(){
    $('.myLink').click(function(evt) {
        $(this).closest(".divOne").next().find("fieldset").append( "<p>Test</p>" );
    });
});

在我看来，这非常难看并且容易出现很多问题。如果你稍微改变你的html的结构，这几乎可以保证打破。

closest(".divOne")将找到类.divOne的最近节点（在树上）。然后，next()会选择您的.divTwo。最后，find("fieldset")非常明显。

解决方案2

如果您打开向HTML添加两个小东西，还有另一种选择。我在您的附加链接中添加了data-target，并为每个字段集指定了一个ID。这将使您在将来更新HTML时具有一定的灵活性。字段集更直接地与追加链接相关联，而不是依赖于HTML的结构。

<div class="wrap">
  <div class="divOne">
    <div class="divOneItem">
      <a class="myLink" href="#" data-target="#fieldset1">CLICK TO APPEND</a>
    </div>
  </div>
  <div class="divTwo">
    <fieldset id="fieldset1">
      <legend>CONTENT TO APPEND:</legend>
    </fieldset>
  </div>

  <div class="divOne">
    <div class="divOneItem">
      <a class="myLink" href="#" data-target="#fieldset2">CLICK TO APPEND</a>
    </div>
  </div>
  <div class="divTwo">
    <fieldset id="fieldset2">
      <legend>CONTENT TO APPEND:</legend>
    </fieldset>
  </div>
</div>

然后，你可以这样做：

$(document).ready(function(){
  $('.myLink').click(function(evt) {
    const $target = $(evt.target)
    const fieldset = $target.data("target")
    $(fieldset).append( "<p>Test</p>" );
  });
});

Answer 2

尝试：

$(document).ready(function(){
  $('.myLink').click(function() {
     $(this).parent().next(".divTwo").find("fieldset").append( "<p>Test</p>" );
  });
});

查找具有相同类但在同一div中的元素

2 个答案: