Возвращать элементы списка в зависимости от класса и должности - PullRequest
Новая
       3

Возвращать элементы списка в зависимости от класса и должности

1 голос
/ 04 мая 2020

Я работаю с неупорядоченными списками, которые являются частью иерархического меню. Мне нужно вернуть элементы списка на основе их класса и позиции в списке, чтобы затем я мог внести некоторые программные c css корректировки. Вот пример HTML: 

<ul class="category1">    
    <li class="sec secactive" secid="360007912231" categoryid="360002246652" parentsecid="null" style="display: list-item;"><a href="myURL">Section1</a></li>    
    <li class="sec subsec" secid="360008584672" categoryid="360002246652" parentsecid="360007912231" style="background-color: red; display: list-item;"><a href="myURL">Subsection A</a></li>   
    <li class="sec subsec" secid="360008585372" categoryid="360002246652" parentsecid="360007912231" style="background-color: red; display: list-item;"><a href="myURL">Subsection B</a></li>    
    <li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null" style="display: list-item;"><a href="myURL">Section 2</a></li>    
    <li class="sec" secid="360007155641" categoryid="360002246652" parentsecid="null" style="display: list-item;"><a href="myURL">Section 3</a></li>
    <li class="sec subsec" secid="360008585592" categoryid="360002246652" parentsecid="360007912231" style="background-color: red; display: list-item;"><a href="myURL">Subsection A</a></li>
    <li class="sec" secid="360007106191" categoryid="360002246652" parentsecid="null" style="display: list-item;"><a href="myURL">Section 3</a></li>   
</ul>

Если вы посмотрите на образец HTML, вы увидите, что каждый элемент списка (li) имеет класс 'se c'. В большинстве случаев элемент списка будет иметь и другие назначения класса, например, «под c».

Я пытаюсь собрать несколько jQuery, которые позволяют мне программно настроить таргетинг на любой «под * 1020». * 'элемент списка, который непосредственно предшествует элементу списка, который НЕ имеет назначения класса' subs c '. Итак, если мы снова посмотрим на образец HTML, я бы хотел иметь возможность возвращать 3-й и 6-й элементы списка. (У них обоих есть класс «subs c», и они появляются прямо перед другим li, у которого НЕТ класса «subs c».)

Вот jQuery, который я пробовал , но он не работает должным образом. (Похоже, он нацелен на ВСЕ элементы списка «под c», а не только на те, которые мне нужно вернуть.) 

$("li.subsec").each(function() {
    if ($(this).next('li.sec') !='li.subsec');
    $(this).css("background-color", "red");
});

Любые советы о том, как исправить мой jQuery код, будут очень признателен.

Ответы [ 3 ]

1 голос
/ 04 мая 2020

Вам необходимо проверить, содержит ли свойство class (функция prop()) подстроку "subsec". 

$("li.subsec").each(function() {
    if ( !($(this).next().prop("class").includes("subsec") ) )
        $(this).css("background-color", "red");
    else
        $(this).css("background-color", "green");
});

В этом примере я назначил другой цвет (зеленый) элементу, не соответствующему условию (чтобы перезаписать свойство стиля в разделе html, которому в любом случае будет назначен красный цвет фона) .

На следующем изображении показан результат:

siblings with different class

В качестве альтернативы вы можете проверить наличие класса, выполнив для next() element метод hasClass() (который возвращает логическое значение). Таким образом, чек станет 

$("li.subsec").each(function() {
    if ( !($(this).next().hasClass("subsec") ) )
        $(this).css("background-color", "red");
    else
        $(this).css("background-color", "green");
});
1 голос
/ 04 мая 2020

Во-первых, обратите внимание, что вы должны использовать внешние CSS файлы для хранения ваших правил стилизации, а не встроенные style атрибуты. Кроме того, элементы li по умолчанию равны display: list-item, поэтому вам не нужно явно указывать его.

Что касается проблемы, вам необходимо предоставить селектор .subsec для next() и проверить length полученного объекта jQuery, чтобы определить, было ли найдено совпадение: 

$(".subsec").each(function() {
  if ($(this).next('li.subsec').length == 0)
    $(this).css("background-color", "red");
});

Однако это можно сделать более лаконичным, используя вместо этого filter(): 

$(".subsec").filter((i, el) => $(el).next('li.subsec').length === 0).addClass('foo');
.foo { background-color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="category1">
  <li class="sec secactive" secid="360007912231" categoryid="360002246652" parentsecid="null">
    <a href="myURL">Section1</a>
  </li>
  <li class="sec subsec" secid="360008584672" categoryid="360002246652" parentsecid="360007912231">
    <a href="myURL">Subsection A</a>
  </li>
  <li class="sec subsec" secid="360008585372" categoryid="360002246652" parentsecid="360007912231">
    <a href="myURL">Subsection B</a>
  </li>
  <li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null">
    <a href="myURL">Section 2</a>
  </li>
  <li class="sec" secid="360007155641" categoryid="360002246652" parentsecid="null">
    <a href="myURL">Section 3</a>
  </li>
  <li class="sec subsec" secid="360008585592" categoryid="360002246652" parentsecid="360007912231">
    <a href="myURL">Subsection A</a>
  </li>
  <li class="sec" secid="360007106191" categoryid="360002246652" parentsecid="null">
    <a href="myURL">Section 3</a>
  </li>
</ul>

В стороне, будьте осторожны, добавляя нестандартные атрибуты к вашим элементам, например secid, categoryid и parentsecid. Они могут вызвать проблемы в пользовательском интерфейсе, а также с JS. Я бы предложил использовать атрибуты data, если вы хотите хранить метаданные в своем HTML.

0 голосов
/ 05 мая 2020

Следующий код помогает мне: 

$("li.subsec").each(function() {
 if (!($(this).next().hasClass("subsec")))
 $(this).css("background-color", "red");
 });
...