Dev Faq
12
votes

Comment mettre en œuvre «Prévenez» à Vanilla JavaScript sans bibliothèques?

J'ai besoin de mettre en œuvre la fonctionnalité de JQuery's prevuntil () Méthode à Vanilla JavaScript.

J'ai plusieurs

éléments du même niveau: xxx

J'essaie d'utiliser un événement onclick pour trouver le event.target 's jusqu'à ce que un certain critère est atteint (par exemple, Une correspondance de nom de classe) puis arrêtez-vous.

Comment puis-je atteindre cela?

5 commentaires

@glowcoder: personnellement, je trouve qu'il est intéressant de savoir ce que JQuery est en fait faire .

@PIMVDB, jQuery est open source, n'hésitez pas à consulter son code source si vous êtes intéressé par ce qui est-ce que cela fait et surtout comment est-ce que c'est le faire.

@Darin Dimitrov: Je sais que je veux dire qu'il n'y a rien de mal à demander ce qui se passe dans les coulisses.

@PIMVDB, non, il n'y a rien de mal sûr.

Je ne peux pas utiliser jQuery dans l'environnement que je suis en cours d'exécution.

7 Réponses :

2
votes

Il y a une propriété précédente dans le HTML DOM

Voici une référence

http://reference.sitepoint.com/javascript/node/previoussibles < / p>

2 commentaires

La propriété Précédent est une référence à un nœud DOM et non à une fonction.

Je comprends ça complètement. Mais avec une certaine itération simple, vous pouvez l'utiliser pour trouver l'élément précédent qui correspond à ses conditions.

2
votes

Juste jeter un coup d'oeil à Comment JQuery fait-il . 

dir: function( elem, dir, until ) {
    var matched = [],
        cur = elem[ dir ];

    while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
        if ( cur.nodeType === 1 ) {
            matched.push( cur );
        }
        cur = cur[dir];
    }
    return matched;
},

0 commentaires
6
votes

Utilisez .children en combinaison avec .parentnode . Ensuite, filtrez le nodéliste , après la convertir en une matrice: 1 commentaires

NODELIST NODELIST POUR TAILLER COULATION AVEC []. SLICE.CALL (NL) ? Nice :)

8
votes

Exemple Utilisation de précédentselementsibling: xxx

3 commentaires

Cet élément .Previousibling.classname est problématique. Si aucun frère antérieur a la classe souhaitée, élément.previousikeding retournera éventuellement renvoyer null , donc element.previoussikeding.classname "/ code> lancera une erreur.

C'était afin d'empêcher une boucle infinie! Je rigole. J'ai mis à jour

Merci, gars avec un nom long.

3
votes

Que diriez-vous de cela: 

while ( node = node.previousElementSibling ) {
    if ( ( ' ' + node.className + ' ' ).indexOf( 'foo' ) !== -1 ) {
        // found; do your thing
        break;
    }
}

3 commentaires

Voulez-vous être trompé? Puisque je ne vous tromperai pas, je ne peux pas répondre à votre question parce que vous m'avez demandé de ne pas le faire.

@Wayne Non, je n'aime pas être trompé. Je ne vous ai pas demandé de ne pas répondre à ma question. S'il vous plaît répondez-y! Et qu'est-ce que j'ai demandé? Je pensais avoir répondu à une question, je n'ai pas demandé à un.

Désolé malentendu de ma part. Je pensais que tu ne me dis pas que ça ne marche pas dans IE8 littéralement ... pas que tu saches déjà.

13
votes

Cette réponse a été publiée auparavant ici A > En réponse à une question similaire.

Il y a quelques façons de le faire. strong> p>

L'un des éléments suivants devrait faire le tour. Fort > p> 

// METHOD A (ARRAY.FILTER, STRING.INDEXOF)
var siblings = function(node, children) {
    siblingList = children.filter(function(val) {
        return [node].indexOf(val) != -1;
    });
    return siblingList;
}

// METHOD B (FOR LOOP, IF STATEMENT, ARRAY.PUSH)
var siblings = function(node, children) {
    var siblingList = [];
    for (var n = children.length - 1; n >= 0; n--) {
        if (children[n] != node) {
            siblingList.push(children[n]);
        }  
    }
    return siblingList;
}

// METHOD C (STRING.INDEXOF, ARRAY.SPLICE)
var siblings = function(node, children) {
   siblingList = children;
   index = siblingList.indexOf(node);
   if(index != -1) {
       siblingList.splice(index, 1);
   }
   return siblingList;
}

0 commentaires
1
votes

Vous pouvez utiliser index de pour déterminer si l'index des frères et sœurs est inférieur à l'index de l'élément cible: xxx

bonne chance.

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO