jquery - 根据类别和职位返回列表项

Question

我正在使用属于分层菜单一部分的无序列表。我需要根据列表项的类和列表位置返回列表项，以便我可以进行一些编程性的 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) 都有一个“sec”类。在大多数情况下，列表项也会有其他类分配——例如“亚秒”。<​​/p>

我正在尝试组合一些 jQuery，它允许我以编程方式定位紧接在没有“亚秒”类分配的列表项之前的任何“亚秒”列表项。因此，如果我们再次查看示例 HTML，我希望能够返回第三个和第六个列表项。 (它们都有一个“亚秒”类别，并且它们出现在另一个不具有“亚秒”类别的 li 之前。)

这是我尝试过的 jQuery，但它无法正常工作。 (它似乎针对所有“亚秒”列表项，而不仅仅是我需要返回的列表项。)

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

任何有关如何修复我的 jQuery 代码的建议将不胜感激。

Answer 1

首先请注意，您应该使用外部 CSS 文件来存储样式规则，而不是内联 style 属性。此外，li 元素默认为 display: list-item，因此您无需显式设置它。

关于这个问题，您需要向 next() 提供 .subsec 选择器，并检查生成的 jQuery 的 length对象来确定是否找到匹配项:

$(".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。它们可能会导致 UI 和 JS 出现问题。我建议使用data如果您想在 HTML 中存储元数据，请使用属性。