Question

我想将hello段落附加到类别为placeholder的第一个下一个div上。 ul和目标div之间有一个Reply，并且页面上有几个placeholder类。

问题是我无法遍历dom并找不到下一个placeholder。我该如何解决？

$(document).ready(function() {
  $(".replyit").click(function() {
  let hello = '<p>hello</p>'
    
   $(this).closest(".treply").next().find(".placeholder").append(hello);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row treply">
  <div class="col-xs-1">
    <p>Awsome post</p>
  </div>
  <div class="col-xs-2">
    <a class="replyit" href="#">Reply</a>
  </div>
</div>
<ul>
  <li>
    <p>Some text</p>
  </li>
  <li>
    <form class="likep" name="123" method="post">
      <input type="hidden" name="token" value="afewf">
      <input class="pid" type="hidden" name="pid" value="123">

    </form>
  </li>
 </ul>
 <div class="placeholder"></div>

Answer 1

$(this).closest(".treply").next()为您提供下一个ul元素。占位符在此之后，而不在内部。您找不到它。

如果您确定在回复和目标div之间会有ul元素，则只需调用.next()链两次，然后转到div.placeholder。

尝试一下

$(this).closest(".treply").next().next().append(hello);

您也可以使用此

$(this).closest(".treply").siblings('.placeholder:eq(0)')

这将在回复div块之后为您提供类placeholder的第一个元素。

Answer 2

要实现您的要求，您可以调用nextAll()和:first，以获得与单击的.placeholder最接近的同级.treply。试试这个：

$(document).ready(function() {
  $(".replyit").click(function() {
    let hello = '<p>hello</p>'
    $(this).closest(".treply").nextAll('.placeholder:first').append(hello);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row treply">
  <div class="col-xs-1">
    <p>Awsome post #1</p>
  </div>
  <div class="col-xs-2">
    <a class="replyit" href="#">Reply</a>
  </div>
</div>
<ul>
  <li>
    <p>Some text</p>
  </li>
  <li>
    <form class="likep" name="123" method="post">
      <input type="hidden" name="token" value="afewf">
      <input class="pid" type="hidden" name="pid" value="123">
    </form>
  </li>
</ul>
<div class="placeholder"></div>

<div class="row treply">
  <div class="col-xs-1">
    <p>Awsome post #2</p>
  </div>
  <div class="col-xs-2">
    <a class="replyit" href="#">Reply</a>
  </div>
</div>
<ul>
  <li>
    <p>Some text</p>
  </li>
  <li>
    <form class="likep" name="123" method="post">
      <input type="hidden" name="token" value="afewf">
      <input class="pid" type="hidden" name="pid" value="123">
    </form>
  </li>
</ul>
<div class="placeholder"></div>

如何按班级查找下一个div

2 个答案: