Tournage d'un complexe jquery css sélecteur dans un contexte de mise en cache
https://stackoverflow.com/questions/977185
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Après la rétroaction, la réécriture complète de la question.
J'ai le texte suivant marquer :
<body>
<h1>Title</h1>
<p>bla</p>
<div>
... <!-- a thousand tags -->
</div>
<div id="do-not-modify-me">
<!-- a hundred tags -->
</div>
</body>
Je peux accéder à :
<h1>Title</h1>
<p>bla</p>
<div>
... <!-- a thousand tags -->
</div>
À l'aide de :
$('body > *:not(div#do-not-modify-me)');
Je fais ce que je peux obtenir tout le contenu du corps à l'exception de la div avec l'id "ne-pas-modifier-moi".
Maintenant, disons que je veux créer une fonction qui permettent à un autre programmeur de sélectionner quoi que ce soit dans le corps, tout comme le sélectionner avec jquery.L'autre programmeur ne doit pas modifier div#ne pas modifier-moi, mais il ne devrait pas avoir à s'en soucier ni.
$('body > *:not(div#do-not-modify-me)') sera appelé beaucoup de temps, donc nous allons les mettre en cache.
L' idée est :
// TEST CODE
windows.new_body = $('body > *:not(div#do-not-modify-me)');
function select(selector) {
return $(selector, windows.new_body);
}
Le programmeur doit être capable de faire :
// TEST RESULT CODE
select("p").css("color", "red");
Il serait de couleur en rouge tous les <p> dans le corps, mais pas à ceux contenus dans la div#ne pas modifier-moi.
Le CODE de TEST ne fonctionne pas, car actuellement, il applys css() sur les enfants de la raison du contexte, pas le résultat lui-même.
E. G :
select("p").css("color", "red");
Se comporte comme :
$('body > * p :not(div#do-not-modify-me)').css("color", "red");
Alors que le résultat souhaité sera de :
$('body > p :not(div#do-not-modify-me)').css("color", "red");
Notez que :
$('body > * :not(div#do-not-modify-me)').parent().css("color", "red");
Ne fonctionne pas car la <p> div#ne pas modifier-moi de me tourner vers le rouge.
Comment voulez-vous obtenir le résultat en RÉSULTAT de TEST de CODE ?Vous pouvez modifier n'importe quelle partie du code.
La solution
J'ai retiré le montage précédent comme ils sont plus d'actualité, vous pouvez les lire dans l'ÉDITION de l'histoire.
EDIT3
Fondamentalement, le problème est que vous ne pouvez pas mettre en cache le sélecteur.C'est parce que le $() renvoie objets correspondants, pas de non-correspondance des objets.Cela signifie que l'utilisation d'un cache sélecteur signifie que le cache peut être synchronisé avec le réel DOM.I. e.dans cette page simple:
<div>
<p>foo</p><p>bar</p>
</div>
<div class='bar'></div>
.
var context = $('body').children(':not(.bar)'); //this holds: <div><p>foo</p><p>bar</p></div>
$('div', context).append('<p class="x">HAI</p>');
//context still is <div><p>foo</p><p>bar</p></div> even though it should be
//<div><p>foo</p><p>bar</p><p class="x">HAI</p></div>
Donc, vous devez refaire la sélection à chaque fois, bassicly vous avez deux options ici:
//reselect the non-editable area everytime
function select(selector) {
return $(selector, $('body').children(':not(div#do-not-modify-me)') );
}
//or, check the selection against being in the reselectable area.
function select(selector){
return $(selector).filter(function(){
return $(this).parents(':not(div#do-not-modify-me)');
});
}
Vous devriez essayer vous-même lequel est le plus rapide.Je ne pense pas qu'il y a une autre façon de vous assurer de ne pas chercher dans le #ne pas modifier-moi div.
Autre chose que vous pouvez faire pour rendre cela plus facile (et plus rapide je pense) est de conclure la zone modifiable dans un div:
<body>
<div id='modify-me'>
<h1>Title</h1>
<!-- thousands of tags -->
</div>
<div id='do-not-modify-me'>
<!--hundreds of tags -->
</div>
</body>
Ensuite, il vous suffit de faire
function select(selector) {
return $(selector, $('#modify-me') );
}
Autres conseils
Vous avez dit que le code peut être modifié de quelque façon, non? Pourquoi ne pas simplement penser comme ce que vous faire veulent rechercher au lieu de ce que vous ne pas à rechercher. Mettez le reste du code dans un <div> et juste l'utiliser comme contexte. Il ne va pas gagner un prix d'élégance, mais il est simple et fait le travail TM .
Je suis sûr que vous pouvez simplement utiliser « contexte » directement, comme suit:
context = $('body > *:not(div#do-not-modify-me)');
context.doStuff();
Après avoir lu l'explication prolongée, je vais essayer de mon coup:
context = $('body > *:not(div#do-not-modify-me)');
$("*:first",context);
Vous pouvez même faire:
context = $('body > *:not(div#do-not-modify-me)');
context.find( "*:first");
Pour obtenir le nombre d'éléments que vous pouvez faire:
var len = context.length;
Pour accéder au numéro de l'élément i dans la collection que vous pouvez utiliser:
context.get(i);
Et il y a des tonnes d'informations utiles sur api.jquery.com , lire aussi cette probablement vous voulez créer votre propre sélection.
EDIT:
Après, j'ai vu votre récente mise à jour, je pense que ce que vous recherchez est pour itérer sur la capacité contexte résulte des éléments, il pourrait être fait comme je l'ai mentionné ici plusieurs fois par:
for ( var i = 0; i < context.length; ++i)
{
$( context[i]).method( );
// do here you checks, adding, removing.
}
, ne semble pas intelligent, mais devrait fonctionner, vous pouvez résumer cela en étendant .fn $ et la fonction d'exécution de votre objectif.
EDIT # 2:
Essayons une autre façon:
(function($)
{
$.fn.tagName = function( )
{
return this.get(0).tagName;
};
$.fn.pick = function( tag)
{
return this.filter( function( )
{
return $(this).tagName == tag;
});
};
}
})(jQuery);
Après cela, vous pouvez le faire contex.pick ( « p »), il vous ramènera tous paragraphe dans votre jeu de résultats, mais ce code est incomplet, vous devez donc regarder un peu plus dans le code jquery, par exemple pour mettre en œuvre d'une manière que vous serez en mesure d'utiliser la fonctionnalité complète jquery avec la fonction de sélection, probablement vous devez envisager d'utiliser XPath analyseur DOM .
