使用 JQuery 在包含特定文本的 div 之后定位 div

Question

我正在尝试向 div 添加一个新类，该类直接位于包含特定文本的 div 之后。 我已经能够使用我在下面放在一起的 JQuery 成功地向包含特定文本的 div 添加一个类，但未能成功地将该类应用到下一个。

<div class="col-xs-12">    
    <div class="content-holder">Heading<p></p></div>
    <div class="content-paragraph content-holder"><p>Sub heading</p></div>
    <div class="content-paragraph content-holder"><p>Lorum Ipsum</p></div>
    <div class="content-paragraph content-holder"><p>This is what I would like to target</p></div>
    <div class="content-paragraph content-holder"><p>Date here</p></div>
    <div class="content-paragraph content-holder"><p>Etiam tincidunt ac enim id ultrices. Phasellus odio lectus, luctus at vehicula nec, tempus non odio. Vestibulum consequat vitae leo eget molestie. Nulla tristique nisl ac auctor placerat. Donec eu velit dui. </p></div>    
</div>

查询：

 $(document).ready(function() {  
  $("p:contains(Lorum Ipsum)").addClass("found");
  $("p:contains(Lorum Ipsum)").next('.content-paragraph').addClass("located");
});

我想要实现的目标（找到的类应用正确）：

  <div class="content-paragraph content-holder"><p class="found">Lorum Ipsum</p></div>
  <div class="content-paragraph content-holder"><p class="located">This is what I would like to target</p></div>

我仍然在学习的过程中，如果能帮助我朝着正确的方向前进，我将不胜感激。

提前致谢。

Answer 1

当您选择 Paragraph 时，它没有兄弟姐妹，因此.next()将为null 。 考虑以父级为目标。

 $(function() { $("p:contains(Lorum Ipsum)") .addClass("found") .parent().next('.content-paragraph') .addClass("located"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-xs-12"> <div class="content-holder">Heading <p></p> </div> <div class="content-paragraph content-holder"> <p>Sub heading</p> </div> <div class="content-paragraph content-holder"> <p>Lorum Ipsum</p> </div> <div class="content-paragraph content-holder"> <p>This is what I would like to target</p> </div> <div class="content-paragraph content-holder"> <p>Date here</p> </div> <div class="content-paragraph content-holder"> <p>Etiam tincidunt ac enim id ultrices. Phasellus odio lectus, luctus at vehicula nec, tempus non odio. Vestibulum consequat vitae leo eget molestie. Nulla tristique nisl ac auctor placerat. Donec eu velit dui. </p> </div> </div>

Answer 2

不太确定这是否是最有效的方法，但我确实想出了一个解决方案。

 $(document).ready(function() {  
  $("p:contains(Lorum Ipsum)").parent().addClass("found");
  $(".found").next().addClass("located");
});