1

Como posso utilizar o index() apenas para saber a localização do elemento entre elementos que partilham de uma mesma classe especifica? Por exemplo, quero que o index() ignore todas as outras classes exceto a classe 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>

No script:

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

No caso, quero que ele apenas conte como se existissem apenas elemetos com classe 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 -->

No script:

console.log($(".index").index()); // resultado 1
5
  • Mas você já tem isso no exemplo que você fez, quando você faz $(".index"), você seleciona este elemento, agora é saber o que você quer fazer com esta seleção. Commented 14/05/2019 às 1:57
  • Você está querendo obter as outras classes do elemento? Explique melhor sua questão. Commented 14/05/2019 às 2:00
  • No caso o index() vai contar a localização usando todos os elementos, quero que ele conte apenas com os elementos de classe x, no exemplo acima ele vai apontar 3 (começa no 0), mas quero que ele aponte 1 pois vem um elemento dele antes com a classe 'x', invés de contar com todos os elementos, conte apenas com os elementos de classe x
    – user94502
    Commented 14/05/2019 às 2:00
  • Entendi o que você quer, mas qual o objetivo? Commented 14/05/2019 às 2:04
  • Estou criando um sistema de slide em um projeto de nuvem para o meu TCC, estou com o problema apenas nessa função para fazer a contagem da imagem atual que está sendo vista, tipo: "imagem 5 de 10"
    – user94502
    Commented 14/05/2019 às 2:05

2 Respostas 2

2

O método index no JQuery permite-lhe passar um seletor que refere os elementos em que você está interessado. Por isso no seu exemplo apenas tem de fazer assim:

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

Que significa obter a posição do elemento com a classe index mas apenas considerando os elementos com a classe x.

Exemplo:

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>

0

Resolução simples

Seleciono todos os elementos com a classe "x", faço um foreach até encontrar a classe "index" e então atribuo o 'index' para a variável "indice", retornando o valor que você deseja no caso "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>

Solução utilizando o index

Caso exista a possibilidade do índice esta em y ou z, busco a classe "index" primeiro e a partir dela busco a letra que esta vinculada, pego e busco todos os itens desta letra, pego o index como no exemplo acima, só que de forma dinâmica usando a classe "index" para buscar a classe correspondente.

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>

Você deve fazer log-in para responder a esta pergunta.