如果每个（）返回超过4

Question

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

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

这是我目前的代码：

＆＃13;

＆＃13;

$(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);
    });
  });
});

＆＃13;

.list-item {
  display: grid;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我们可以看到console.log正在运行（因此逻辑正在运行）但是没有应用内联CSS。为什么会这样？

Answer 1

此代码：

$(".list-item", this)

查找作为list-item后代的类this的节点。由于.list-item是祖先，您需要将其更改为：

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

选择ul（this）的特定容器。