循环遍历元素并逐步应用每个CSS规则

时间：2018-02-07 16:24:24

标签： javascript jquery html

我有一个网格布局，每个布局都有可变数量的元素。我想通过使用类grid-column循环遍历每个<ul>，为div中存在的每个元素动态添加内联.list CSS规则。因此，HTML中代码的输出必须是：

<ul class="list" style="grid-column: 1;"></ul>
<ul class="list" style="grid-column: 2;"></ul>
<ul class="list" style="grid-column: 3;"></ul>

以下是代码示例：

// iterate through each div named "list item"
$(".list-item").each(function() {
  // get the amount of each ul within the div
  var listAmount = $(".list-item > .sub-list").size();
  // I also tried:
  // var listAmount = $(".list-item > .sub-list").length;

  // for each one that is present within the div,
  for (var i = 0; i < listAmount.length; i++) {
    // apply the CSS "grid-column" of 1, 2, 3, 4 which is defined by i
    $(".sub-list").css("grid-column", i);
  }
});
<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>

不幸的是，内联样式未按预期应用。

我的JS片段被我的思路评论。我不明白为什么这不起作用，我做错了什么？

3 个答案:

答案 0 :(得分：1)

这是我的解决方案：

  1. 迭代每个.list-item

  2. 使用每个ul.list元素作为过滤器搜索.list-item

  3. 将grid-column样式应用于每个ul.list。请注意each函数参数如何允许您引用当前索引和对象（i和obj）

    4. // iterate through each div named "list item"
$(".list-item").each(function(a, listItem) {
  var list = $(listItem);
  var sublist = $("ul.list", list);
  sublist.each(function(i, obj){
    $(obj).css("grid-column", i+1);
  });
});
    <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>

答案 1 :(得分：1)

您循环使用的方式实际上并不是通过子列表。您必须遍历每个列表中的每个子列表并向其添加css。

这是一个工作示例

var listItems = jQuery('.list-item');
listItems.each(function(index, value) {
  $(value).find('.list').each(function(i, list) {
    //index will start from 0, adding 1 to make grid-column 
    // start from 1
    //adding empty string to convert it into a string
    var columnSize = i + 1 + "";
    $(list).css('grid-column', columnSize);
  });
});
.list-item {
  display: grid;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>

</html>

以上是上述代码段https://plnkr.co/edit/CVthyQ8mcYUFKpomfFar?p=preview

的摘要

答案 2 :(得分：0)

每次迭代都会将样式应用于所有子列表。我想你需要改变这个：

var subLists = $(".list-item > .sub-list");

for (var i = 0; i < subLists.length; i++) {
  subLists.get(i).css("grid-column", i);
}
相关问题
最新问题