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

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>