Найти следующий объект без определенного слова в стиле

У меня есть эти div в моем html:

<div class="slide" style=""></div>
<div class="slide" style="background: url(/img/2.jpg)"></div>
<div class="slide" style="background: url(/img/3.jpg)"></div>
<div class="slide" style="background: url(/img/4.jpg)"></div>
<div class="slide" style=""></div>
<div class="slide" style=""></div>
<div class="slide" style=""></div>

У меня есть переменная, которая является индексом одного из приведенных выше элементов div, скажем, равна 2, так что это тот, у которого 3.jpg в качестве фона.

Теперь я пытаюсь получить индекс следующего div с классом «слайд», индекс которого больше моего var и у которого нет «фона» в «стиле». Если нет таких div с индексом больше, чем мой var, я бы хотел начать поиск div с начала списка.

Точно так же я пытаюсь найти последний div перед моим var без слова «фон» в «стилях» и аналогичным образом, если таких div нет, я хотел бы начать поиск с конца списка.

Итак, в основном я пытаюсь получить значение 4 для nextDiv и 0 для lastDiv, для приведенного выше примера.

Я знаю, что $.nextAll() с :first может помочь добиться того, что мне нужно, и я также знаю, что выбор '.slide' без «фона» во встроенных «стилях» можно сделать с помощью $(".slide [style*='background']"), но я не могу найти способ поставить синтаксис вместе с добавлением необходимых условий.

Пожалуйста помоги. Спасибо.


jquery next
person zee    schedule 08.05.2014    source источник
comment
Начните с удаления кавычек внутри атрибутов стиля.   -  person adeneo    schedule 08.05.2014
comment
извините, я небрежно вставил фрагменты html   -  person zee    schedule 08.05.2014

Ответы (1)


arrow_upward
1
arrow_downward

У меня есть переменная, которая является индексом одного из приведенных выше элементов div, скажем, равна 2, так что это тот, у которого 3.jpg в качестве фона.

...

Теперь я пытаюсь получить индекс следующего div со слайдом класса, индекс которого больше, чем мой var, и который не имеет фона в стиле.

Что вам нужно для этого буквального требования, так это комбинация eq, < a href="http://api.jquery.com/nextAll/" rel="nofollow noreferrer">nextAll, filter и (если вам действительно нужен индекс) index .

var index = $(".slide").eq(startingIndex).nextAll(".slide").filter(function() {
    return $(this).attr("style").indexOf("background") === -1;
}).index();

Это даст вам индекс элемента относительно его братьев и сестер (всех).

Но если вам просто нужен этот элемент, вместо этого используйте first:

var nextSlideWithoutBackground = $(".slide").eq(startingIndex).nextAll(".slide").filter(function() {
    return $(this).attr("style").indexOf("background") === -1;
}).first();

На самом деле, вы могли бы использовать :gt, но это псевдоселектор, поэтому он может быть не лучше чем при использовании nextAll. Однако вот как это будет выглядеть:

var index = $(".slide:gt(" + startingIndex + ")").filter/*...and so on...*/
person T.J. Crowder    schedule 08.05.2014
comment
Привет Т.Дж. Большое спасибо за совет, к сожалению, он не помог. Я нашел способ найти объект, используя: $('.slide').eq(my var).nextAll('.slide:not([style*="background"]):first').index(); даже не уверен, что это лучший способ, но он работает. - person zee; 09.05.2014
comment
@zee: вышеприведенное работает отлично: jsbin.com/cosoyowi/1, jsbin.com/cosoyowi/2. Тем не менее, я действительно злюсь на себя, потому что, конечно, селектор атрибута *= лучше, чем filter - jsbin .com/cosoyowi/3. :-) Вы должны опубликовать это как ответ и принять его (SO позволит вам принять его завтра). - person T.J. Crowder; 09.05.2014