jQuery: Variables to Compare text in various list items

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/61448344/jquery-variables-to-compare-text-in-various-list-items

标签

jquery

list

variables

compare