jquery trova il fratello precedente più vicino con la classe

146

ecco il html grezzo con cui riesco a lavorare:

<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>

Devo attraversare da .current_sub, trovare il precedente più vicino .par_cate fare cose ad esso.

.find("li.par_cat")restituisce l'intero carico di .par_cat(ne ho circa 30 nella pagina). Ho bisogno di prendere di mira quello singolo.

Gradirei davvero qualsiasi consiglio :)

— daulex
fonte

7

Caspita, i gatti sono davvero su Internet! Ora abbiamo anche par gatti e sub gatti.

— JD Smith,

257

Provare:

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

Provato con il tuo markup:

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

riempirà il precedente più vicino li.par_catcon "woohoo".

— karim79
fonte

grazie Karim. Anche questo ha funzionato bene, ma suppongo che .prev () consumerebbe meno risorse, poiché .prevAll otterrebbe TUTTI gli elementi corrispondenti precedenti e quindi filtrerebbe quello di cui ho bisogno. Accettare la risposta di Ed.

— daulex,

3

In realtà, dopo un po 'di sms, il .prev () non è riuscito in alcuni casi. .prevTutto con: primo, ha funzionato ogni volta. Grazie.

— daulex,

1

.prev () controlla solo l'elemento immediatamente precedente. Ho aggiunto il commento alla risposta di seguito insieme all'esemplificazione di jsFiddle. Dopo essersi guardato intorno, questa è la risposta migliore poiché, sebbene debba scorrere tutti gli elementi, non richiede due funzioni per afferrare tutto e poi filtrare per trovarla.

— David Hobs,

8

Questo significa che :firststa lavorando su un elenco di elementi restituiti che inizia più vicino all'oggetto selezionato (al contrario dall'alto verso il basso rispetto alla pagina)?

— NReilingh

2

Grazie mille per la risposta molto utile. Puoi rispondere alla domanda @NReilingh perché mi confonde davvero. Non è :firstun selettore CSS che seleziona il primo elemento DOM (ad esempio, div.red:firstselezionerà il primo DIV rosso nel DOM ) ha fatto jQuery analizzare il selettore in modo diverso?

— Ragioniere م

17

Provare

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

— Ed James
fonte

19

Aspetta cosa? Questo non controlla solo l'elemento immediatamente precedente? Quindi il tuo codice restituirebbe null? - Qui è testato su jsFiddle: jsfiddle.net/Y2TEH

— David

4

@DavidHobs L'ho scritto due anni fa .... Di sicuro userei prevAll () in questi giorni.

— Ed James,

8

@EdWoodcock considera di aggiornare la tua risposta, in quel caso.

— Hugo Zink,

14

L'uso di prevUntil () ci consentirà di ottenere un fratello distante senza dover ottenere tutto. Avevo un set particolarmente lungo che richiedeva troppo CPU utilizzando 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();

Questo ottiene il primo fratello precedente se corrisponde, altrimenti ottiene il fratello precedente quello corrispondente, quindi ne eseguiamo un altro backup con prev () per ottenere l'elemento desiderato.

— eprothro
fonte

5

Penso che a tutte le risposte manchi qualcosa. Preferisco usare qualcosa del genere

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

Ti salva non aggiungendo: prima all'interno del selettore ed è più facile da leggere e capire. Il metodo prevUntil () ha anche prestazioni migliori piuttosto che usare prevAll ()

— Tom McDonough
fonte

0

Puoi seguire questo codice:

<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>';
}
?>

Puoi avere un'idea da questo.

— AL MaMun
fonte