jquery each: только циклы с z-индексом - PullRequest
Новая
       36

jquery each: только циклы с z-индексом

2 голосов
/ 17 апреля 2011

Продолжая эту публикацию , я иду дальше для еще большей проблемы - как я могу зациклить элемент div, который имеет только z-индекс?

CSS 

#layer-1 { z-index:1; position:absolute; }
#layer-2 { z-index:2; position:absolute; }
#layer-3 { z-index:3; position:absolute; }

HTML 

<div id="layer-1">layer-1</div>
<div id="layer-2">layer-2</div>
<div id="layer-3">layer-3</div>
<div id="layer-4">layer-4</div>

JQuery, 

var index_highest = 0;

// more effective to have a class for the div you want to search and 
// pass that to your selector
$("div").each(function() {

    // always use a radix when using parseInt
    var index_current = parseInt($(this).css("zIndex"), 10);
    alert(index_current);

    if(index_current > index_highest) {
        index_highest = index_current;
    }
});

Код jquery здесь зацикливает каждый элемент div. не будет хорошим решением, когда у меня есть тонны div в моем корневом документе. поэтому я думаю, что в идеале код мог бы просто зацикливать элемент div, имеющий только z-index, а затем игнорировать остальные элементы div.

Возможно ли это?

Спасибо.

Ответы [ 2 ]

2 голосов
/ 17 апреля 2011

Я думаю, что вам нужно было бы перебрать все DIV и проверить значение z-индекса CSS, что не поможет. Нет более подходящего способа выбрать их в качестве подмножества строго по этим критериям; также, если у вас есть другие DIV с z-index на странице, он также выберет их (если вы можете это сделать). Наверное, не очень хороший путь.

Вы должны сгруппировать их, если они вместе: 

<div id="layers">
 <div id="layer-1">layer-1</div>
 <div id="layer-2">layer-2</div>
 <div id="layer-3">layer-3</div>
 <div id="layer-4">layer-4</div>
</div>

$("#layers").each(function() {
    // stuff happens
});

Или добавить классы в индексированные по z DIV: 

<div id="layer-1" class="layer">layer-1</div>
<div id="layer-2" class="layer">layer-2</div>
<div id="layer-3" class="layer">layer-3</div>
<div id="layer-4" class="layer">layer-4</div>

$(".layers").each(function() {
    // stuff happens
});

Также вы можете использовать ^ селектор , если ваше соглашение об именах идентификаторов соответствует вашим рекомендациям: 

<div id="layer-1">layer-1</div>
<div id="layer-2">layer-2</div>
<div id="layer-3">layer-3</div>
<div id="layer-4">layer-4</div>

$("div[id^=layer-]").each(function() {
    // stuff happens
});

http://jsfiddle.net/MFqNm/

0 голосов
/ 17 апреля 2011

Так или иначе, ваш Javascript должен будет пройти через все div (хотя то, что Джаред сказал о группировке всех применимых div s в одном контейнере, является хорошим моментом), чтобы увидеть, какие из них имеют z-index set (поскольку ни в одном из известных мне браузеров нет встроенного селектора свойств CSS). Поэтому я не думаю, что вы получите значительное повышение производительности по сравнению с простым циклом всех div и continue; во всех итерациях, где у вас нет z-индекса (if (!$(this).css('z-index')) continue;).

Если вы действительно обеспокоены, вы можете попытаться определить, какие элементы будут иметь z-index на уровне сервера, и добавить класс программно. Затем вы можете использовать jQuery для выбора элементов только этого класса.

...