jquery encontra o irmão anterior mais próximo da classe

146

aqui está o html áspero com o qual trabalho:

<li class="par_cat"></li>
<li class="sub_cat"></li>
<li class="sub_cat"></li>
<li class="par_cat"></li> // this is the single element I need to select
<li class="sub_cat"></li>
<li class="sub_cat"></li>
<li class="sub_cat current_sub"></li> // this is where I need to start searching
<li class="par_cat"></li>
<li class="sub_cat"></li>
<li class="par_cat"></li>

Eu preciso sair do .current_sub , encontrar o anterior mais próximo .par_cate fazer coisas com ele.

.find("li.par_cat")retorna toda a carga de .par_cat(eu tenho cerca de 30 na página). Eu preciso direcionar o único.

Realmente apreciaria algumas dicas :)

jquery html traversal tree-traversal daulex
fonte
7
Uau, os gatos realmente estão por toda a internet! Agora também temos gatos par e sub-gatos.
JD Smith #

Respostas:

257

Experimentar:

$('li.current_sub').prevAll("li.par_cat:first");

Testei com sua marcação:

$('li.current_sub').prevAll("li.par_cat:first").text("woohoo");

irá preencher o anterior mais próximo li.par_catcom "woohoo".

karim79
fonte
obrigado Karim. Isso funcionou bem também, mas presumo que o .prev () consome menos recursos, pois o .prevAll obteria TODOS os elementos correspondentes anteriores e depois filtraria o que eu precisava. Aceitando a resposta de Ed.
Daulex
3
Na verdade, após algumas mensagens de texto, o .prev () falhou em alguns casos. .prevTudo com: primeiro, funcionou sempre. Obrigado.
Daulex
1
.prev () apenas verifica o elemento imediatamente anterior. Adicionei o comentário à resposta abaixo, juntamente com o exemplo do jsFiddle. Depois de olhar em volta, essa é a melhor resposta, pois, embora precise percorrer todos os elementos, não é necessário duas funções para pegar todas e filtrar para encontrá-las.
David Hobs
8
Isso significa que :firstestá trabalhando em uma lista de elementos retornados que iniciam o mais próximo ao objeto selecionado (em vez de cima para baixo em relação à página)?
NReilingh
2
Muito obrigado pela resposta muito útil. Você pode responder à pergunta @NReilingh, porque isso realmente me confunde. :firstUm seletor de CSS não seleciona o primeiro elemento no DOM (por exemplo div.red:first, selecionará o primeiro DIV vermelho no DOM ) o jQuery analisou o seletor de maneira diferente?
precisa
17

Experimentar 

$('li.current_sub').prev('.par_cat').[do stuff];

Ed James
fonte
19
Espere o que? Isso não verifica apenas o elemento imediatamente anterior? Assim, seu código retornaria nulo? - Aqui é testado em jsFiddle: jsfiddle.net/Y2TEH
David Hobs
4
@ DavidDobs Eu escrevi isso há dois anos .... Eu certamente usaria prevAll () hoje em dia.
Ed James
8
@ EdWoodcock considere atualizar sua resposta, nesse caso.
23815 Hugo Zink
14

Usar prevUntil () nos permitirá obter um irmão distante sem precisar obter tudo. Eu tinha um conjunto particularmente longo que consumia muita CPU usando prevAll ().

var category = $('li.current_sub').prev('li.par_cat');
if (category.length == 0){
  category = $('li.current_sub').prevUntil('li.par_cat').last().prev();
}
category.show();

Isso obtém o primeiro irmão anterior, se corresponder, caso contrário, obtém o irmão anterior àquele que corresponde, portanto, apenas fazemos backup de mais um com prev () para obter o elemento desejado.

eprothro
fonte
5

Eu acho que todas as respostas estão faltando alguma coisa. Eu prefiro usar algo assim

$('li.current_sub').prevUntil("li.par_cat").prev();

Economiza você não adicionando: primeiro dentro do seletor e é mais fácil de ler e entender. O método prevUntil () também tem um desempenho melhor do que o uso de prevAll ()

Tom McDonough
fonte
0

Você pode seguir este código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".add").on("click", function () {
            var v = $(this).closest(".division").find("input[name='roll']").val();
            alert(v);
        });
    });
</script>
<?php

for ($i = 1; $i <= 5; $i++) {
    echo'<div class = "division">'
        . '<form method="POST" action="">'
        . '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
        . '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
        . '</form></div>';
}
?>

Você pode ter uma idéia disso.

AL MaMun
fonte