我无法使用jquery重新定义几个li元素的css。我做错了吗？

Question

我想使用jQuery重新定义li元素的一些标准属性（wordpress-因为我自己没有写php，所以我不得不重新定义很多东西），但这是行不通的。在这里，我想用一个列表来完成它：

<ul class="wpb_image_grid_ul" style="position: relative; height: 453px;">
	<li class="isotope-item" style="position: absolute; left: 0px; top: 0px;"></li>
	<li class="isotope-item" style="position: absolute; left: 0px; top: 0px;"></li>
	<li class="isotope-item" style="position: absolute; left: 0px; top: 0px;"></li>
	<li class="isotope-item" style="position: absolute; left: 0px; top: 0px;"></li>
</ul>

带有下一个代码：

$(".wpb_image_grid_ul").each(function() {
console.log("try to fit gallery");
$(this > 'li').css({"position": "relative", "float": "left", "margin-left": "0px", "left": "0px", "right": "0px", "background-color": "rgb(50,50,50)"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我想更改它的CSS，也许还从元素中删除了预定义的样式，但是样式什么也没有发生。谢谢您的帮助！

Answer 1

您正在为ul调用each函数。但是只有一个ul。您应该将其称为li项目：

$(".isotope-item").each(function() {
    console.log("try to fit gallery");
    $(this).css({"position": "relative", "float": "left", "margin-left": "0px", "left": 
    "0px", "right": "0px", "background-color": "rgb(50,50,50)"});
});

作为旁注，您将所有元素都放置在彼此的顶部，因此您只能看到一个li点。

Answer 2

选择器有一个小错字。 $（this）=> ul，$（this）.find（'> li'）= LI元素集合。

$(document).ready(function () {
    $(".wpb_image_grid_ul").each(function () {
        $(this).find('> li').css({ "position": "relative", "float": "left", "margin-left": "0px", "left": "0px", "right": "0px", "background-color": "rgb(50,50,50)" });
    })
});

Answer 3

我认为您尝试访问li的方式可能不正确。

尝试这样的事情：

$(".wpb_image_grid_ul > li").each(function(){
    // Your code to edit each li in here.
    // You can access each li by using $(this)
    // For example,
    $(this).css("position", "relative");
});

这应该有效！希望对您有所帮助。

Answer 4

您应该直接通过li元素的类作为目标：

<ul class="wpb_image_grid_ul" style="position: relative; height: 453px;">
    <li class="isotope-item" style="position: absolute; left: 0px; top: 0px;">item 1</li>
    <li class="isotope-item" style="position: absolute; left: 0px; top: 0px;">item 2</li>
    <li class="isotope-item" style="position: absolute; left: 0px; top: 0px;">item 3</li>
    <li class="isotope-item" style="position: absolute; left: 0px; top: 0px;">item 4</li>
</ul>

$(".isotope-item").each(function() {
console.log("try to fit gallery");
$(this).css({"position": "relative", "float": "left", "margin-left": "0px", "left": "0px", "right": "0px", "background-color": "rgb(50,50,50)"});
});

Jsfiddle：https://jsfiddle.net/mk2g61zr/2/