Проблемы переопределения CSS нескольких элементов li в jQuery

Question

Я хочу переопределить некоторые стандартные свойства (wordpress - поскольку я сам не пишу php, мне нужно переопределить много вещей) моих элементов li с помощью jQuery, но это не работает. Здесь я хочу сделать это с одним списком:

<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

Вы хотите этот селектор для каждой вашей функции: .wpb_image_grid_ul > li. С каждой функцией я ссылался на повторяющиеся элементы во втором параметре функции обратного вызова (el):

$(".wpb_image_grid_ul > li").each(function(idx, el) {
  $(el).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>
<ul class="wpb_image_grid_ul" style="position: relative; height: 453px;">
  <li class="isotope-item" style="position: absolute; left: 0px; top: 0px;">1</li>
  <li class="isotope-item" style="position: absolute; left: 0px; top: 0px;">2</li>
  <li class="isotope-item" style="position: absolute; left: 0px; top: 0px;">3</li>
  <li class="isotope-item" style="position: absolute; left: 0px; top: 0px;">4</li>
</ul>

Answer 2

Вы должны нацелить элементы 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/

Answer 3

Была небольшая опечатка с селектором. $ (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 4

Я думаю, что способ, которым вы пытаетесь получить доступ к 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 5

Вы вызываете функцию each для ул. Но есть только одна ул. Вместо этого вы должны называть его для своих элементов 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,