Targeting div after div which contains specific text using JQuery-CodePudding

I am trying to add a new class to a div, which is directly after a div which contains specific text. I have been able to add a class to the div which contains the specific text successfully using the JQuery I have put together below, but have not successfully been able to apply the class to the next.

<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>

JQuery:

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

What I am trying to achieve (the found class is applying correctly):

<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>

I am still in the process of learning, and would appreciate a little help to steer me in the right direction.

Thanks in advance.

CodePudding user response：

As you are selecting the Paragraph, it has no siblings, so .next() will be null. Consider targeting the Parent.

$(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>

CodePudding user response：

Not too sure if this is the most efficient approach, but I did come up with a solution.

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