Breve mano per .parent(). Parent(). Parent()

Question

Ho una funzione jQuery, che ha bisogno di ottenere la posizione del genitore di un elemento.

Sembra qualcosa di simile:

function show(e) { 
     //debugger; 
      var nextTableSelector = $(e).parent().parent().parent().parent().parent().parent().parent().parent(); 
    } 

C'è una mano breve per attraversare la struttura DOM?

Qualcosa sulla falsariga di:

$(e).parent()[5]; 

Qualsiasi suggerimento?

Nota che questa struttura DOM è generata da un framework JS di terze parti e non sono in grado di aggiungere ID o Classi aggiuntivi a questa struttura. Sono bloccato a dover risalire attraverso il DOM in questo modo.

Answer 1

Se non è possibile identificare esclusivamente l'elemento desiderato ma si conosce il quinto genitore, è possibile eseguire $(e).parents().eq(5) o $(e).parents()[5] come suggerito.

Answer 2

È possibile utilizzare .closest() invece parent().parent() quindi passare all'elemento più vicino non importa quanto lontano sarà nella struttura DOM.

Answer 3

Come ho menzionato in un commento su un'altra risposta, se si desidera indirizzare un genitore specifico che ha un selettore, si vorrà utilizzare .closest.

Tuttavia penso che tu sia alla ricerca di qualcosa che ottiene il genitore X l'albero, il modo migliore per farlo è con una funzione di credo:

function getXParent(el, x) { // el = jQuery element, x = number of generations 
 
    var curEl = el; 
 
    for (var i = 1; i <= x; i++) { 
 
    curEl = curEl.parent(); 
 
    } 
 
    return curEl; 
 
} 
 
var newEl = getXParent($('#t5'), 3); 
 
alert(newEl[0].id); 
 

 
alert($('#t5').parents()[2].id); // Courtesy of Narayon

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="t1"> 
 
    <div id="t2"> 
 
    <div id="t3"> 
 
     <div id="t4"> 
 
     <div id="t5"> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

EDIT: Narayon ha un'alternativa più semplice, credo.

Answer 4

Quindi, quello che ti serve è .closest() o .parents(), come di seguito.

var target = $('#source').closest('#target'); 
var target = $('#source').parents('#target'); 
alert (target[0].id); 

HTML di esempio per quanto sopra:

<div id="target"> 
    Man! 
    <div> 
     <div> 
      <div id="source"></div> 
     </div> 
    </div> 
</div> 

io consiglierei .closest() come .parents() viaggia l'albero DOM per elemento radice del documento, aggiungendo ogni elemento antenato di una collezione temporanea; quindi filtra quella raccolta in base a un selettore se ne viene fornito uno mentre .closest() percorre l'albero DOM solo finché trova una corrispondenza per il selettore fornito.

Edit:

Per quanto riguarda il tuo caso, si consiglia di fare:

var n = 5; //say you want the 5th parent 
var parent5th = $("#source").parents().eq(n-1); 
alert (parent5th[0].id); 

//So, your code becomes: 
var n = 8; //You want the 8th parent 
$(e).parents().eq(n-1); 

Qui è una funzione non-così-brutto se si vuole:

$.fn.nthParent = function(level) { 

    level = level || 1; 
    if (level <= 0) return; 

    return level === 1 && 
     $(this).parent() || 
     $(this).parents().eq(level-1); 
} 

Utilizzo:

//Apply some CSS to level 1 (immediate) parent 
$("#source").nthParent().css({ 
    border: "1px solid red" 
}); 

OR 

$(".source").each(function(i) { 
    $(this).nthParent(i+1).css({ 
     border: "4px solid blue" 
    }); 
}); 

A Demo per quanto sopra.