2

Por exemplo, tenho o seguinte código:

var $els = $('elementos'); // cerca de 8 elementos selecionados

Então desse grupo de elementos, quero um elemento que tenha a classe active. Tentei algo como:

$els.find('.active');

Porém não deu certo, porque o método find procura por elementos filhos. Não tentei o método siblings pois tenho mais de um elemento selecionado e eles não são necessariamente "irmãos".

Como encontrar um determinado elemento neste grupo e depois poder navegar entre eles como next() e prev(), é possível?

2 Respostas 2

2

Nesse caso você usa filter:

var $els = $('elementos');
var $el = $els.filter('.active');

Agora, se você navegar com next e prev a partir do $el, vai estar navegando pelos irmãos dele no DOM, não na sua lista original $els.

4
  • É verdade, tinha esquecido do filter. Pois então bfavaretto, eu já imaginava isso da navegação. Eu reparei que no objeto $el tem o objeto prevObject que é a lista anterior, se eu tiver o index do $el da pra fazer a navegação. Como pega-lo?
    – KaduAmaral
    Commented 17/07/2015 às 18:16
  • Olha só: jsfiddle.net/ndc1nryh/1
    – KaduAmaral
    Commented 17/07/2015 às 18:17
  • Você volta pra lista anterior com o endjsfiddle.net/ndc1nryh/2
    – bfavaretto
    Commented 17/07/2015 às 18:30
  • Verdade. Adicionei uma resposta com essa parte, vou complementar...
    – KaduAmaral
    Commented 17/07/2015 às 18:35
0

Complementando a resposta, sobre como navegar entre os elementos:

Basta:

  • Pegar o objeto anterior: $el.prevObject $el.end() (como mencionado pelo @bfavaretto)
  • Pegar o índice do objeto selecionado: $els.index($el)
  • Navegar entre eles: $el.prevObject[$els.index($el)-1] ou $el.prevObject[$els.index($el)+1]
  • Navegar entre eles: $el.end()[$els.index($el)-1] ou $el.end()[$els.index($el)+1]

$els = $('li');
$el = $els.filter('.active');


$prev = $( $el.end()[$els.index($el)-1] );
$next = $( $el.end()[$els.index($el)+1] );

$('.prev').text('Anterior: ' + $prev.text() );
$('.el').text( 'Ativo: '     +  $el.text()  );
$('.next').text( 'Próximo: ' + $next.text() );
.active{
   color: #2376D0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Item 1 1</li>
<li>Item 1 2</li>
<li>Item 1 3</li>
<li>Item 1 4</li>
<li>Item 1 5</li>
</ul>
<ul>
<li class="active">Item 2 1</li>
<li>Item 2 2</li>
<li>Item 2 3</li>
<li>Item 2 4</li>
<li>Item 2 5</li>
</ul>
<div class="prev"></div>
<div class="el"></div>
<div class="next"></div>

3
  • Eu acho que prevObject foi concebido como um método interno do jQuery, tanto que não consta da documentação. Melhor usar o end mesmo.
    – bfavaretto
    Commented 17/07/2015 às 18:37
  • E cuidado com o index, se não me engano ele retorna o índice do objeto em relação ao objeto pai no DOM, não em relação à sua seleção.
    – bfavaretto
    Commented 17/07/2015 às 18:40
  • Atualizei o código, coloquei o primeiro elemento da segunda lista pra testar, e o objeto anterior selecionado foi o último da primeira lista. @bfavaretto
    – KaduAmaral
    Commented 17/07/2015 às 18:40

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .