我有一个网格布局,每个网格布局中都有不同数量的元素。我想动态添加内联grid-column
通过循环遍历 div 中存在的每个元素的 CSS 规则<ul>
与一类.list
。所以 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 片段是根据我的思路进行注释的。我不明白为什么这不起作用,我做错了什么?
您循环遍历的方式实际上并没有遍历子列表。您必须循环遍历每个列表中的每个子列表并向其添加 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 https://plnkr.co/edit/CVthyQ8mcYUFKpomfFar?p=preview
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)