index() only for elements with a specific class

Asked

Viewed 31 times

1

How can I use the index() just to know the location of the element between elements that share the same specific class? For example, I want index() to ignore all other classes except the class x:

<div class="y"></div>
<div class="x"></div>
<div class="z"></div>
<div class="x index"></div>
<div class="y"></div>
<div class="x"></div>
<div class="z"></div>

In the script:

console.log($(".index").index()); // resultado 3

In this case, I want him to just count as if there were only class elemetos x

<!--<div class="y"></div> ignorado -->
<div class="x"></div>
<!--<div class="z"></div> ignorado -->
<div class="x index"></div>
<!--<div class="y"></div> ignorado -->
<div class="x"></div>
<!--<div class="z"></div> ignorado -->

In the script:

console.log($(".index").index()); // resultado 1
javascript jquery

  • But you already have this in the example you made, when you make $(".index"), you select this element, now is to know what you want to do with this selection.

  • Are you wanting to get the other classes of the element? Explain your question better.

  • In case index() will count the location using all elements, I want it to count only with class x elements, in the example above it will point 3 (starts at 0), but I want it to point 1 because it comes an element of it before with class 'x', instead of having all the elements, count only with the class elements x

  • I understand what you want, but what’s the point?

  • I am creating a slide system in a cloud project for my TCC, I have the problem just in this function to count the current image being seen, like: "image 5 of 10"

2 answers

3

The method index in Jquery allows you to pass a selector that refers to the elements you are interested in. So in your example you just have to do so:

$(".index").index(".x")

Which means to get the position of the element with the class index but only considering the elements with the class x.

Example:

console.log($(".index").index(".x"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="y"></div>
<div class="x"></div>
<div class="z"></div>
<div class="x index"></div>
<div class="y"></div>
<div class="x"></div>
<div class="z"></div>

1


Simple resolution

I select all elements with class "x", I make a foreach until I find the class "index" and then I assign the index to the variable "Indice", returning the value you want in the case "1",

var indice = -1;
$('.x').each(function( index ) {
  if($(this).attr('class').includes('index'))
    indice =  index;
});
console.log(indice);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="y"></div>
<div class="x"></div>
<div class="z"></div>
<div class="x index"></div>
<div class="y"></div>
<div class="x"></div>
<div class="z"></div>

Solution using the index

If there is a possibility that the index is in y or z, I look for the class "index" first and from it I look for the letter that is linked, pick and search all the items of this letter, pick the index as in the example above, only dynamically using the class "index" to fetch the corresponding class.

var indice = -1;
$('.index').each(function( index ) {
  if($(this).attr('class').includes('index')){
    var classe = $(this).attr('class').split(' ')[0];
    $("."+classe).each(function( index ) {
      if($(this).attr('class').includes('index'))
        indice =  index;
    });
  }
});
console.log(indice);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="y"></div>
<div class="x"></div>
<div class="z"></div>
<div class="x index"></div>
<div class="y"></div>
<div class="x"></div>
<div class="z"></div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.