jQuery:比较各种列表项中文本的变量

Question

如果我有以下有序列表：

<ol class="breadcrumbs">
<li title="Sbox">
<a href="myURL">SANDBOX</a>
</li>
<li title="API Ref">
<a href="myURL">API Reference</a>
</li>
<li title="Schemas">
<a href="myURL">Schema Files</a>
</li>
</ol>

我可以通过使用以下jQuery代码"收获"第二个子列表项的文本("PI参考"(：

var bcrumbtext = $("ol.breadcrumbs li:nth-child(2)").text();

如果我有多个无序列表(确切地说是6个(，其结构如下：

<ul class="category">
<li class="cat" catid="360002246652"><a>Getting Started</a></li>
<li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null"><a href="myURL">How to do X</a></li>
<li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null"><a href="myURL">How to do Y</a></li>
<li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null"><a href="myURL">How to do Z</a></li>
</ul>
<ul class="category">
<li class="cat" catid="360002246652"><a>API Reference</a></li>
<li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null"><a href="myURL">How to do X</a></li>
<li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null"><a href="myURL">How to do Y</a></li>
<li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null"><a href="myURL">How to do Z</a></li>
</ul>

如何设置一个变量，使我能够成功地"收获"每个无序列表的第一个列表项("cat"的li类(中的文本？

我的最终目标是能够将一个"bcrumbtext"值(在这种特殊情况下："API引用"(与具有类"cat"的每个列表项的文本值进行比较。(这个.cat列表项总是"类别"UL中的第一个子项。(一旦建立了匹配，我就需要更改CSS值，但这是下一步，我会及时处理这一步。目前，我只是纠结于如何设置第二个变量并执行值比较。

提前感谢您提供的任何意见。

---

这是一个更新的代码块。我希望用匹配的文本值显示属于特定li.cat的所有li.sec列表项。请注意，li.sec的默认"display"属性为"none"(因此我使用了"show"方法(。

不知怎么的，这仍然不起作用。控制台中没有显示错误，但没有实现所需的效果：

var bcrumbtext = $("ol.breadcrumbs li:nth-child(2)").text();
$("ul.category li.cat").each(function() { 
if ($(this).text() == bcrumbtext) { 
$(this).nextUntil('ul').show('li.sec');
} 
});

Answer 1

尝试的问题是.show()方法不将元素选择器作为参数。.show()的文档描述了可能的参数。

此外，现在知道你想要实现什么，而不是使用nextUntil，我会使用.siblings()。nextUntil依赖于在感兴趣的HTML元素周围放置其他HTML元素，这是一个不必要的依赖项，而.siblings()很适合这个目的。

请注意，从"ol.breadcrumbs li:nth child(2("检索文本将包括<li title="...">和</li>之间存在的任何前导/尾随空白(，例如，换行符(。那里有一些新的行，所以在比较之前需要用.trim()删除这些行。

牢记以下几点重构您的尝试：

var bcrumbtext = $("ol.breadcrumbs li:nth-child(2)").text().trim();
$("ul.category li.cat").each(function() {
if ($(this).text().trim() == bcrumbtext) {
$(this).siblings(".sec").show()
} 
});

这里有一把小提琴来演示它的工作原理(点击Try按钮(。