получить индекс из выбранных элементов

Question

Таким образом, у меня есть DIV с некоторыми дочерними элементами, и когда я выбираю один с JQuery Я хочу, чтобы получить индекс его в селекторе

<div> 
    <div class="red"></div> 
    <div class="red"></div> 
    <div class="red"></div> 
    <div class="blue"></div> 
    <div class="red"></div> 
    <div class="blue"></div> 
    <div class="blue"></div> 
    <div class="red"></div> 
</div> 

Так позволяет сказать, что у меня есть последний элемент в основном выделенном элементе. Если я вызову index(), он даст мне «7», потому что из всех дочерних элементов индекс равен «7». Но теперь позвольте сказать, что я хочу получить индекс, основанный на других «красных» элементах, цель состоит в том, чтобы вернуть значение «4», потому что из всех «красных» элементов он является пятым. Я просмотрел документацию и не нашел много чего, затем я экспериментировал с помещением селекторов в метод index(), например index ('. Red'), но я не мог ничего работать.

Answer 1

Ну, documentation говорит:

.index(element)
элемент элемент DOM или первый элемент в пределах объекта JQuery искать.

Так можно сделать:

selectedElements.filter('.red').index(this); 

Если вы не selectedElements уже, вы можете выбрать соответствующие братьев и сестер, с помощью, например:

$(this).parent().children('.red') 

Если каждый элемент имеет только один класс и затем фильтр может быть динамическим:

var index = $(this).parent().children('.' + this.className).index(this); 

Answer 2

Используйте функцию .index() документирована here

Для выше, если кто-то хочет получить индекс элемента красного класса использования $('div .red').index(elem);

$('div .red) создаст список элементов с красным классом в рамках дел. .index(elem) будет искать elem в массиве.

Answer 3

Для меня, это прекрасно работает с данной HTML:

$('div').eq(5)​​​​​​​​​​.index('.red') // 3 

Вы можете разместить селекторы в функцию .index().

Answer 4

Запуск через все из них с помощью идентификатора = тест в качестве родителя

DEMO: http://jsfiddle.net/T7fXR/

$('#test > div').each(function(){ 
    var thisClass=$(this).attr('class'); 
    $(this).css('background',thisClass); 
    /* get index based on class*/ 
    var idx=$('.'+thisClass).index(this); 
    $(this).text('Index= '+idx) 

})