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

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

我该如何解决？

Answer 1

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

相关联的h5

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: