jQuery-从具有特定类的元素列表中获取单击项的索引

Question

I have a collection of elements in this format:

<div class="row feed">

    <div class="col-sm-4 inner"><span></span></div>
    <div class="col-sm-4 inner"><span></span></div>
    <div class="col-sm-4 inner"><span></span></div>

    <div class="clearfix visible-sm"></div>

    <div class="col-sm-4 inner"><span></span></div>
    <div class="col-sm-4 inner"><span></span></div>
    <div class="col-sm-4 inner"><span></span></div>

    <div class="clearfix visible-sm"></div>

</div>

I am trying to get the index of the parent when a span is clicked. This works fine but if I click the 4th, 5th or 6th then the number is incorrect as it counts the clearfix div as an index.

I can't simply add 1 to the result as this format is dynamic and it grows, hence the maths could get complicated fast.

Instead is there a way to specify to only get the index of certain objects, I thought the following may do what I wanted but it doesn't seem to?

$(document).on("click", ".feed .inner span", function(){

    var activeElement = $(this).parent();

    console.log($(".feed:not(.clearfix)").index(activeElement));
});

but that just gives -1 which means no element found.

Answer 1

Yes, with jQuery's .index() function you can pass an argument to tell it to get the index relative to a group of elements.

 $(document).on("click", ".feed .inner span", function() { console.log($(this).parent().index('div.col-sm-6.inner')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="row feed"> <div class="col-sm-6 inner"><span>1</span></div> <div class="col-sm-6 inner"><span>2</span></div> <div class="col-sm-6 inner"><span>3</span></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 inner"><span>4</span></div> <div class="col-sm-6 inner"><span>5</span></div> <div class="col-sm-6 inner"><span>6</span></div> <div class="clearfix visible-sm"></div> </div> 

Per the docs for .index() :

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.

If a selector string is passed as an argument, .index() returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector. If the element is not found, .index() will return -1.

Answer 2

尝试将其更改为

console.log(activeElement.index(".inner"));

Answer 3

That's because the parent element of the clicked element doesn't exist in the $(".feed:not(.clearfix)") collection. You should select the children of the .feed element instead of the .feed element. One option is:

$(".feed > div:not(.clearfix)").index(activeElement);

Answer 4

You were close. You need to get the index relative to the direct children of the .feed element.

The parent element of this isn't in the root of the collection .feed:not(.clearfix) , therefore you need to select the direct children of .feed instead. In doing so, the index will be relative to the direct children elements of .feed rather than .feed itself.

In the example below, the direct child selector, > , is used:

$(document).on("click", ".feed .inner span", function() {
    var index = $(".feed > :not(.clearfix)").index($(this).parent());
});

Answer 5

Why you only try to add a property to your html

then you only need something like this $( "[data-index='1']" )