如果each（）返回多于4，则应用内联样式(Apply an inline style if each() returns more than 4)

编程入门行业动态更新时间:2024-10-24 08:30:24

我昨天问了一个关于循环元素和应用内联样式的问题，可以在这里看到：循环遍历元素并递增地为每个元素应用CSS规则

为了构建它，我只想在超过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没有被应用。 为什么会这样？ 
I asked a question yesterday about looping through elements and applying inline styles, which can be seen here: Loop through elements and incrementally apply CSS rule for each one 
To build off of it, I want to apply another inline style to the current div only if the condition of having more than 4 <ul>s is true.  
This is what my code is currently: 
 
 
  
  $(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> 
  
 
 
We can see the console.log is working (so the logic is working) but the inline CSS is not being applied. Why would that be?
                最满意答案
                
                    
                         此代码：  
$(".list-item", this)
 
 寻找具有类别list-item节点，它们是this后代。 由于.list-item是一个祖先，您需要将其更改为：  
$(this).closest(".list-item")
 
 选择ul （this）的特定容器。 
This code: 
$(".list-item", this)
 
looks for nodes with class list-item that are descendants of this. As .list-item is an ancestor, you need to change it to: 
$(this).closest(".list-item")
 
to select the specific container for the ul (this).