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 代码“收获”第二个子列表项的文本（“API 参考”）：

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>

如何设置一个变量，使我能够为每个无序列表成功“收集”第一个列表项（“猫”类）中的文本？

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

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

---

这是一个更新的代码块。我希望显示所有 li.sec 列表项属于特定 li.cat 与匹配的文本值。请注意，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() 方法没有将元素选择器作为参数。 documentation for .show() 描述了可能的参数。

此外，现在知道你想要实现什么，而不是使用nextUntil，我会使用.siblings()。 nextUntil 依赖于在感兴趣的元素周围放置其他 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()
  } 
});

这里有一个fiddle 来证明它可以工作（单击“尝试”按钮）。