使用jQuery选中包含特定文本的div的紧邻后续div并添加自定义类

问题原因 #

你当前代码的问题在于next()方法只能查找当前选中元素的同级兄弟节点。你选中的是<p>元素，它的父元素才是content-paragraph类的div，这个p本身没有带content-paragraph类的同级元素，自然匹配不到目标。

正确实现代码 #

$(document).ready(function() {  
  // 选中包含指定文本的p标签，添加found类
  const targetP = $("p:contains('Lorum Ipsum')").addClass("found");
  // 先匹配当前p的上级content-paragraph容器，再找该容器的下一个同级content-paragraph，最后选中容器内的p加类
  targetP.closest('.content-paragraph')
         .next('.content-paragraph')
         .find('p')
         .addClass("located");
});

逻辑说明 #

• 用closest('.content-paragraph')而不是直接parent()是更稳妥的写法，就算后续p标签外层多套了其他元素，只要上级存在带content-paragraph类的节点就能正确匹配，兼容性更强
• 找到目标p的父级容器后，再用next()匹配下一个同级的内容容器，最后选中容器内的p标签添加类即可达到你要的效果

内容的提问来源于stack exchange，提问作者JS_basic_knowledge