jQuery:用于比较各种列表项中文本的变量 [英] jQuery: Variables to Compare text in various list items
问题描述
如果我有以下排序列表:
<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>
如何设置一个变量，使我能够成功地收获"第一个列表项("cat"的li类)中的文本以获取无序列表中的每一个?
我的最终目标是能够将一个"bcrumbtext"值(在这种情况下为"API Reference")与具有"cat"类的EACH列表项的文本值进行比较. (此.cat列表项始终是类别" UL中的第一个后代.)一旦建立了匹配项，我将需要更改CSS值，但这是下一步，我将及时进行处理.目前，我只停留在如何设置第二个变量并执行值比较上.
首先感谢您可以提供的任何输入.
这是更新的代码块.我希望显示所有li.sec列表项，它们都位于具有匹配文本值的特定li.cat下.请注意，li.sec的默认显示"属性为无"(因此我使用了显示"方法).
以某种方式，这仍然无法正常工作.控制台中未显示任何错误，但未实现所需的效果:
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');
}
});
尝试的问题是.show()方法没有将元素选择器作为参数. .show() 的文档描述了可能的参数.
此外，现在就知道要实现的目标，而不是使用nextUntil，我会使用 .siblings() . nextUntil依赖于感兴趣的HTML元素周围的其他HTML元素的放置，这是不必要的依赖，并且.siblings()非常适合此目的.
请注意，从"ol.breadcrumbs li:nth-child(2)"中检索文本将包括在<li title="...">之间存在的任何前导/后跟空格( eg ，换行符)和</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()
}
});
这是一个小提琴，以证明它可以正常工作(单击尝试"按钮). /p>
If I have the following ordered list:
<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>
I am able to 'harvest' the second child list item's text ('API Reference') by using this jQuery code:
var bcrumbtext = $("ol.breadcrumbs li:nth-child(2)").text();
If I then have multiple Unordered lists (6 to be exact) with the following structure:
<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>
How do I set up a variable that will allow me to successfully 'harvest' the text in the first list item (li class of 'cat') for EACH of the unordered lists?
My ultimate goal is to be able to compare the one 'bcrumbtext' value (in this particular case: 'API Reference') to the text value for EACH list item that has a class of 'cat'. (This .cat list item is always the first offspring in the 'category' UL.) Once a match is established, I will then need to change a CSS value, but that is the next step and I will handle that step in time. For the moment, I am just stuck on how to set up my second variable and execute the value comparisons.
Thanks in advance for any input you can provide.
Here is an updated code block. I am looking to show all li.sec list items falling under the particular li.cat with the matching text value. Note that the default 'display' property for li.sec is 'none'(hence my use of the 'show' method).
Somehow, this is still not working. No errors are showing up in the console, but the desired effect is not implemented:
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');
}
});
The problem with your attempt is that the .show() method does not take an element selector as an argument. The documentation for .show() describes possible arguments.
In addition, knowing now what you want to achieve, rather than use nextUntil I'd use .siblings(). The nextUntil relies on the placement of other HTML elements around the one of interest, which is an unnecessary dependency, and .siblings() suits this purpose well.
Note that retrieving the text from "ol.breadcrumbs li:nth-child(2)" will include any leading/trailing white space (e.g., new line characters) that exist between <li title="..."> and </li>. There are some new lines in there, so these need to be removed with .trim() before comparing.
Refactoring your attempt with these things in mind:
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()
}
});
Here's a fiddle to demonstrate that it works (click the Try button).
这篇关于jQuery:用于比较各种列表项中文本的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
