javascript - 如果each()返回超过4，则应用内联样式

Question

我昨天问了一个关于循环元素和应用内联样式的问题，可以在这里看到:Loop through elements and incrementally apply CSS rule for each one

为了构建它，我想仅在具有超过 4 <ul> 的条件时才对当前 div 应用另一个内联样式。是真的。

这就是我当前的代码:

$(function() {
  var listItems = $(".list-item");
  listItems.each(function(index, value) {
    $(value).find(".list").each(function(i, list) {
      var columnSize = i + 1 + "";
      if (columnSize > 4) {
        console.log("it's more")
        $(".list-item", this).css("left", "-125px");
      }
      $(list).css("grid-column", columnSize);
    });
  });
});

.list-item {
  display: grid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="list-item">
  <ul class="list">
    <li class="list__header"><a href="#">Main Item</a></li>
  </ul>
  <ul class="list">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
  <ul class="list">
    <li class="list__header"><a href="#">Main Item</a></li>
  </ul>
</div>

<div class="list-item">
  <ul class="list">
    <li class="list__header"><a href="#">Main Item</a></li>
  </ul>
  <ul class="list">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
  <ul class="list">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
  <ul class="list">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
  <ul class="list">
    <li class="list__header"><a href="#">Main Item</a></li>
  </ul>
</div>

<div class="list-item">
  <ul class="list">
    <li class="list__header"><a href="#">Main Item</a></li>
  </ul>
  <ul class="list">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
  <ul class="list">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
  <ul class="list">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
  <ul class="list">
    <li class="list__header"><a href="#">Main Item</a></li>
  </ul>
</div>

我们可以看到 console.log 正在工作(因此逻辑正在工作)，但内联 CSS 没有被应用。为什么会这样？

Answer 1

这段代码:

$(".list-item", this)

查找具有 list-item 类(属于 this 的后代)的节点。由于 .list-item 是祖先，您需要将其更改为:

$(this).closest(".list-item")

为ul(此)选择特定容器。