jquery - 根据类别和职位返回 list 项目

我正在使用属于分层菜单的无序列表。我需要根据其类别和列表位置返回列表项，以便随后可以进行一些编程的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”类。在大多数情况下，列表项也将具有其他类分配-例如“ subsec”。

我试图放在一起一些jQuery，使我能够以编程方式定位没有“ subsec”类分配的列表项之前的任何“ subsec”列表项。因此，如果我们再次查看示例HTML，我希望能够返回第3和第6个列表项。 （它们都具有“ subsec”类，并且它们出现在另一个没有“ subsec”类的li之前。）

这是我尝试过的jQuery，但无法正常工作。 （这似乎是针对所有“ subsec”列表项，而不只是我需要返回的项。）

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

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

最佳答案

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

关于此问题，您需要为.subsec提供next()选择器，并检查结果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问题。如果要在HTML中存储元数据，建议使用data属性。