Vanilla JavaScript .closest senza jQuery

Sto lavorando a un'applicazione che ha solo jQuery 1.1 installato che non supporta il metodo .closest.Vanilla JavaScript .closest senza jQuery

Il mio script attualmente si presenta così:

$('.navPanel').find('img').closest('td').hide();

Così sto cercando per ogni immagine nel .navPanel e attraversare il DOM e nascondendo il TD che si siede in Qualcuno sa se c'è. una funzione JavaScript vaniglia Potrei semplicemente aggiungere al mio script che il poliffo è il metodo più mancante?

Grazie per il vostro tempo.

fonte

2015-02-09 William Li

[ '.parents()'] (http://api.jquery.com/parents/)? –

http://stackoverflow.com/questions/15329167/closest-ancestor-matching-selector-using-native-dom – BeNdErR

Ciao, avrei dovuto dire che .parent() non funzionerà in questo caso come alcune delle pagine, il img ha un tag href attorno ad esso che rimuoverà questo elemento piuttosto che il td. Quindi ha davvero bisogno di trovare il più vicino td –

-10

È possibile utilizzare con il selettore eq. entrambi i genitori e la selezione della eq vengono aggiunte nella versione 1.0:

$('.navPanel').find('img').parents('td').eq(0).hide();

fonte

2015-02-09 09:29:20

Non proprio vaniglia, quindi tecnicamente non risponde alla domanda. Ma posso immaginare che l'OP ne sarà felice. 'parents()' è disponibile da jQuery 1.0. 'eq()' solo da 1.1.2, comunque. – GolezTrol

@GolezTrol ciò che l'OP chiede e il modo migliore per ottenere ciò che vogliono sono due cose completamente diverse. –

@GolezTrol: non sono sicuro di vanilla, ma questo dovrebbe fare il trucco per tutte le versioni jquery in quanto sono state aggiunte nella versione 1.0 e non sono mai state deprecate da allora. –

myImage.parentNode;

è tanto di vaniglia, come si arriva. Whack che in un ciclo fino a colpire il tipo di tag obbligatorio:

while(thisTag.parentNode.tagName !== 'TD') // uppercase in HTML, lower in XML 
    { 
    thisTag=thisTag.parentNode; 
    }

Questo dovrebbe fare il trucco in vecchi js pianura.

Danny

fonte

2015-02-09 09:50:50 allnodcoms

Ovviamente questo ha il problema che se non lo trovi e arrivi a 'document' allora si romperà. :) – Xotic750

@ Xotic750 - Molto vero, sarebbe morto in modi orribili, ma questo è javascript;) – allnodcoms

Quindi basta aggiungere un correttore se nel frattempo ha colpito il tag html quindi uscire dal ciclo –

browser moderni hanno il metodo Element.closest().

Esempio:

document.querySelector('.navPanel img').closest('td')

Riferimento: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Qui è possibile verificare che i browser hanno un supporto integrato: https://caniuse.com/#feat=element-closest

Quando non v'è alcun supporto nel browser il seguente polyfill potrebbe essere utilizzato: https://github.com/jonathantneal/closest

fonte

2016-12-02 17:19:52 jpoppe

Causa IE ancora non supporta element.closest() la cosa più semplice da fare è utilizzare un polyfill.

Includere this js (questa è la polyfill per più vicino())

(function (ElementProto) { 
 
\t if (typeof ElementProto.matches !== 'function') { 
 
\t \t ElementProto.matches = ElementProto.msMatchesSelector || ElementProto.mozMatchesSelector || ElementProto.webkitMatchesSelector || function matches(selector) { 
 
\t \t \t var element = this; 
 
\t \t \t var elements = (element.document || element.ownerDocument).querySelectorAll(selector); 
 
\t \t \t var index = 0; 
 

 
\t \t \t while (elements[index] && elements[index] !== element) { 
 
\t \t \t \t ++index; 
 
\t \t \t } 
 

 
\t \t \t return Boolean(elements[index]); 
 
\t \t }; 
 
\t } 
 

 
\t if (typeof ElementProto.closest !== 'function') { 
 
\t \t ElementProto.closest = function closest(selector) { 
 
\t \t \t var element = this; 
 

 
\t \t \t while (element && element.nodeType === 1) { 
 
\t \t \t \t if (element.matches(selector)) { 
 
\t \t \t \t \t return element; 
 
\t \t \t \t } 
 

 
\t \t \t \t element = element.parentNode; 
 
\t \t \t } 
 

 
\t \t \t return null; 
 
\t \t }; 
 
\t } 
 
})(window.Element.prototype);

e poi è proprio come IE avrebbe capirlo e funziona tutto senza altre modifiche.

from jonathantneal/closest

fonte

2017-06-21 09:13:36 caramba

Vanilla JavaScript .closest senza jQuery

risposta

Problemi correlati