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>

Я могу «собрать» текст элемента второго дочернего списка («Справочник по API»), используя этот код jQuery:

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>

Как мне установить переменную, которая позволит мне успешно "собрать" текст в первом элементе списка (класс li 'cat') для КАЖДОГО из неупорядоченных списков?

Моя конечная цель состоит в том, чтобы иметь возможность сравнивать одно значение 'bcrumbtext' (в данном конкретном случае: 'Ссылка API') с текстовым значением для КАЖДОГО элемента списка, который имеет класс 'cat'. (Этот элемент списка .cat всегда является первым потомком в UL 'category'.) Когда совпадение будет установлено, мне нужно будет изменить значение CSS, но это следующий шаг, и я выполню этот шаг в время. На данный момент я просто застрял в том, как настроить мою вторую переменную и выполнить сравнение значений.

Заранее благодарен за любой ввод, который вы можете предоставить.

---

Вот обновленный блок кода. Я хочу показать все элементы списка li.sec, попадающие под конкретный li.cat с соответствующим значением текста. Обратите внимание, что по умолчанию свойство display для li.sec имеет значение 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 элементов вокруг интересующего элемента, что является ненужной зависимостью, и .siblings() хорошо подходит для этой цели.

Обратите внимание, что получение текста из "ol. хлебные крошки 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 , чтобы продемонстрировать, что это работает (нажмите кнопку Try).