Wie filter-Elemente zurückgegeben, die von QuerySelectorAll
Arbeite ich auf eine javascript-library, und ich verwenden Sie diese Funktion, um Spiel-Elemente:
$ = function (a)
{
var x;
if (typeof a !== "string" || typeof a === "undefined"){ return a;}
//Pick the quickest method for each kind of selector
if(a.match(/^#([\w\-]+$)/))
{
return document.getElementById(a.split('#')[1]);
}
else if(a.match(/^([\w\-]+)$/))
{
x = document.getElementsByTagName(a);
}
else
{
x = document.querySelectorAll(a);
}
//Return the single object if applicable
return (x.length === 1) ? x[0] : x;
};
Gibt es Gelegenheiten, wo ich wünschen würde, zu filtern, das Ergebnis dieser Funktion, wie herausgreifen einen div span
oder eine #id div
oder einige andere ziemlich einfache Selektor.
Wie kann ich filter diese Ergebnisse? Kann ich ein Dokument erstellen, das fragement, und verwenden Sie die querySelectorAll-Methode auf das fragment, oder muss ich zurückgreifen auf die manuelle string-manipulation?
Ich nur die Sorge um moderne Browser und IE8+.
Wenn Sie wollen, schauen Sie sich den rest meiner Bibliothek, es ist hier: https://github.com/timw4mail/kis-js
Edit:
Klären, ich möchte in der Lage sein, etwas zu tun, wie $_(selector).Kinder(other_selector) und die Kinder wieder Elemente, die passenden Selektor.
Edit:
Also hier ist meine mögliche Lösung für die einfachsten Selektoren:
tag_reg = /^([\w\-]+)$/;
id_reg = /#([\w\-]+$)/;
class_reg = /\.([\w\-]+)$/;
function _sel_filter(filter, curr_sel)
{
var i,
len = curr_sel.length,
matches = [];
if(typeof filter !== "string")
{
return filter;
}
//Filter by tag
if(filter.match(tag_reg))
{
for(i=0;i<len;i++)
{
if(curr_sell[i].tagName.toLowerCase() == filter.toLowerCase())
{
matches.push(curr_sel[i]);
}
}
}
else if(filter.match(class_reg))
{
for(i=0;i<len;i++)
{
if(curr_sel[i].classList.contains(filter))
{
matches.push(curr_sel[i]);
}
}
}
else if(filter.match(id_reg))
{
return document.getElementById(filter);
}
else
{
console.log(filter+" is not a valid filter");
}
return (matches.length === 1) ? matches[0] : matches;
}
Dauert es ein tag wie div
, eine id oder ein class-Selektor, und gibt die übereinstimmenden Elemente mit den curr_sel
argument.
Möchte ich nicht zurückgreifen müssen, um eine vollständige Selektor-engine, also ist es eine bessere Möglichkeit?
- Abgesehen von pädagogischen Zwecken warum ist Ihre Bibliothek besser als vorhandene?
- Ich bin versuchen, um eine minimalistische, modulare Bibliothek, die nicht zu tun haben mit den Dummheiten von JScript im IE6/7
- Ich denke, das ist ziemlich einzigartig. Die meisten Bibliotheken beschäftigen sich mit IE6/7.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich glaube nicht, dass ich die Frage richtig. Warum wollen Sie zu "filter" das Ergebnis
querySelectorAll()
welche infact, ist eine Art filter selbst. Wenn Sie die Abfrage fürdiv span
oder noch besser#id div
, diese Ergebnisse sind bereits gefiltert, nicht ?Jedoch, die Sie anwenden können
Array.prototype.filter
dem statischen ErgebnisquerySelectorAll
wie folgt:Code würde ersten Verwendung
querySelectorAll()
Abfrage für alle<div>
Knoten innerhalb des Dokuments. Danach werden filter für<div>
- Knoten, die enthalten mindestens ein<span>
. , Der code macht nicht viel Sinn und ist nur für demonstrative Zwecke (nur für den Fall das einige SO Mitglied anlegen möchte, ein donk Kommentar)update
Können Sie auch filter mit
Element.compareDocumentPosition
. Ich werde auch sagen, wenn Elementedisconnected
,following
,preceding
odercontained
. Sehen MDC .compareDocumentPosition()ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
Beispiel:
Einige Browser unterstützen
qsa
unterstützt auch nicht-standard -matchesSelector
Methode, wie:...das wird ein boolean zurückgibt darstellt, ob
element
abgestimmt Selektor zur Verfügung gestellt. So könnte man die Iteration der Sammlung und anwenden der Methode, die Beibehaltung positive Ergebnisse.In Browsern, die nicht über eine
matchesSelector
sind, würden Sie wahrscheinlich brauchen, um zu bauen Ihre eigenen selector-Methode, ähnlich wie die selector-engine, das Sie erstellen.Prägnanteste Art und Weise, in 2019 ist mit verbreiten syntax
...
plus ein array-literal[...]
, die große Arbeit mit wiederholenden Objekten, wie die NodeList zurückgegebenquerySelectorAll
:[...document.querySelectorAll(".myClass")].filter(el=>{/*your code here*/})