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

【问题标题】：Find element with same class but in the same div查找具有相同类但在相同 div 中的元素
【发布时间】：2017-12-31 22:13:32
【问题描述】：

我正在尝试使用类名在 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“点击追加”链接，我想只在其各自的“divTwo”追加一个“hello world”

标签！

以下代码附加在每个“divTwo”div 中！

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

【问题讨论】：

标签： jquery

【解决方案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>" );
  });
});

【讨论】：

【解决方案2】：

试试：

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

【讨论】：