循环遍历元素并逐渐应用每个元素的CSS规则 [英] Loop through elements and incrementally apply CSS rule for each one
本文介绍了循环遍历元素并逐渐应用每个元素的CSS规则的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个网格布局，每个布局都有可变数量的元素。我想通过循环每个< ul> 动态添加内联与一个 .list 类。因此，HTML代码的输出需要是：
< ul class =liststyle =grid-column ：1;>< / ul>
< ul class =liststyle =grid-column：2;>< / ul>
< ul class =liststyle =grid-column：3;>< / ul>
以下是代码示例：
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.8.3>
样式不符合预期。
我的JS代码片段是用我的思路评论的。我不明白为什么这不起作用，我做错了什么？
解决方案
你通过你循环的方式实际上并没有通过子列表。你必须循环每个列表中的每个子列表并添加css。
这是一个工作示例
< pre class =snippet-code-js lang-js prettyprint-override>
var listItems = jQuery（'.list-item'）; listItems.each（function（index，value）{$（value ）.find（'.list'）。each（function（i，list）{//索引将从0开始，加1以使网格列//从1开始//添加空字符串以将其转换为字符串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 =＃>主要项目< / a>< / li> < / UL> < ul class =list> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < / UL> < ul class =list> < li class =list__header>< a href =＃>主要项目< / a>< / li> < / UL> < / DIV> < div class =list-item> < ul class =list> < li class =list__header>< a href =＃>主要项目< / a>< / li> < / UL> < ul class =list> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < / UL> < ul class =list> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < / UL> < ul class =list> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < / UL> < ul class =list> < li class =list__header>< a href =＃>主要项目< / a>< / li> < / UL> < / DIV> < div class =list-item> < ul class =list> < li class =list__header>< a href =＃>主要项目< / a>< / li> < / UL> < ul class =list> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < / UL> < ul class =list> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < / UL> < ul class =list> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < li>< a href =＃>项目< / a>< / li> < / UL> < ul class =list> < li class =list__header>< a href =＃>主要项目< / 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
I have a grid layout, with variable amounts of elements in each one. I would like to dynamically add inline grid-column CSS rules for each element that is present in a div by looping through each <ul> with a class of .list. So the output of the code in HTML needs to be:
<ul class="list" style="grid-column: 1;"></ul>
<ul class="list" style="grid-column: 2;"></ul>
<ul class="list" style="grid-column: 3;"></ul>
Below is the code sample:
// 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>
Unfortunately the inline styles aren't applying as expected.
My JS snippet is commented with my train of thought. I don't understand why this doesn't work, what am I doing wrong?
解决方案
The way you are looping through you are not actually going through sub lists. You have to loop though each sub-list within each list and add css to it.
Here is a working example
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>
Here is a plunker of the above snippet https://plnkr.co/edit/CVthyQ8mcYUFKpomfFar?p=preview
这篇关于循环遍历元素并逐渐应用每个元素的CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
