如何选择具有特定文本的框？

Question

我有这个HTML：

<h5>something</h5>
<ul>
   <li class="name">John</li>
   <li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
   <li class="name">Peter</li>
   <li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
   <li class="name">Ali</li>
   <li class="age">62</li>
</ul>

我想选择这个部分：

<h5>specific text</h5>
<ul>
   <li class="name">Peter</li>
   <li class="age">19</li>
</ul>

逻辑是<h5>标签的内容。 我想要一个specific text 。 实际上，预期结果是该名称和该年龄的数组。 像这样的事情： var res = ['Peter', 19]; 。

但是我的代码选择了所有那些<ul> ：

$('ul').map(function (){
   var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
});

我该如何解决？

Answer 1

您可以使用:contains()来查找包含所需特定字符串的H5 。 然后使用.next()来获取与h5相关联的ul

 $("h5:contains('specific text')").next('ul').map(function (){ var res = [$(this).find('li.name').text(), $(this).find('li.age').text()]; console.log(res) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h5>something</h5> <ul> <li class="name">John</li> <li class="age">21</li> </ul> <h5>specific text</h5> <ul> <li class="name">Peter</li> <li class="age">19</li> </ul> <h5>something else</h5> <ul> <li class="name">Ali</li> <li class="age">62</li> </ul> 

Answer 2

用于从ul列表中获取数据的Jquery脚本：

 $('ul').map(function (){ var res = [$(this).find('li.name').text(), $(this).find('li.age').text()]; // console.log(res); }); var htmVal = ''; $('h5').each(function(index){ htmVal = $(this).html(); if(htmVal == 'something else'){ var detail ={name:$(this).next().find('li.name').html(),age:$(this).next().find('li.age').html()}; console.log(detail); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h5>something</h5> <ul> <li class="name">John</li> <li class="age">21</li> </ul> <h5>specific text</h5> <ul> <li class="name">Peter</li> <li class="age">19</li> </ul> <h5>something else</h5> <ul> <li class="name">Ali</li> <li class="age">62</li> </ul>