jQuery：用于比较各种列表项中文本的变量

如果我有以下有序列表：

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

如果我有多个结构如下的无序列表（准确地说是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>

---

您尝试的问题是

.show（）

方法没有将元素选择器作为参数。描述了可能的参数

此外，现在就知道你想要实现什么，而不是使用

nextUntil

我会使用。

nextUntil

依赖于在感兴趣的HTML元素周围放置其他HTML元素，这是一种不必要的依赖关系，

.sibbins（）

非常适合此目的

请注意，从“ol.breadcrumbs li:nth child（2）”检索文本将包括

和
之间存在的任何前导/尾随空格（例如，新行字符）。其中有一些新行，因此在比较之前，需要使用
.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()
  } 
});

这里有一个示例来演示它的工作原理（单击“尝试”按钮）。
$（“ul.category li.cat”）.each（函数（）{if（$（this.text（）==bcrumtext）{…更改CSS值…}）
这将遍历
ul.类别中的每个
li.cat
项目，并使用
bcrumtext
检查每个
li.cat
项目的文本。非常感谢@lower。我想我快到了。代码没有抛出错误，这是一个很好的开始。不过，我仍然没有达到我需要的最终效果——即用匹配的文本值显示直接位于特定“li.cat”下的所有“li.sec”列表项。（'li.sec'的默认显示为'none'。）我在原始问题中添加了一些代码。也许你能找出问题所在？再次感谢你的帮助。关于
.show（）
方法有一个很好的发现，我同意你关于下一步取消
的建议。但不幸的是，新代码仍然不起作用。控制台中未显示任何错误，但目标
li.sec
项仍不显示。基于我不懈的调试尝试，我的直觉是if语句出了问题。语法可能很好，但不知何故，
bcrumbtext
和'li.cat'之间的匹配并没有被所有处理所识别，因此，
.show（）
永远不会被触发。啊@Marconi您可以轻松地为要检查的变量添加
控制台.log（…）
。@Marconi我稍微更新了我的答案，并在
bcrumbtext
上添加了
.trim（）
。原因是
.text（）
将包括文本中的任何前导或尾随换行符或其他空白字符，这些字符在比较时需要删除。
和
之间的任何换行符都将成为
.text（）
的一部分。我添加了一个小提琴链接来演示。宾果！它起作用了。非常感谢你！
trim（）。（请注意，您确实在以
show（）
结尾的行后省略了一个结束分号，但我将其放在了代码中。我试图将其添加到您的响应中，但收到一条警告，表示编辑队列已满。）现在-如果您不介意，请注意最后一件事：如果我想要第二个变量来保存
li.cat
文本，如何正确地将它与
each（）
函数一起使用？这是我想象中的变量：
var cattext=$（“ul.category li.cat”）.text（）.trim（）@Marconi Javascript中的分号是可选的。你可以从小提琴上看到这一点。很高兴它起作用了。您对cattext
的建议看起来不错。
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');
     } 
 });

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()
  } 
});