nur Elemente auswählen, die direkt Text

So etwas wie dies enthalten ich habe:nur Elemente auswählen, die direkt Text

<div class="main"> 
    <div class="useless"> 
    text I don't want.  
    </div> 
    <div class="useless"> 
    text I don't want.  
    </div> 
    <div class="narrow"> 
    text I'm searching for 
    </div> 
    <div class="useless"> 
    text I don't want.  
    </div> 
    <div class="useless"> 
    text I don't want.  
    </div> 
</div>

Mit jQuery schönen :contains selector, kann ich nach einem Stichwort suchen, aber es wird sowohl die Eltern und das Kind zurück.

Ich möchte nur Elemente zurückgeben, die direkt das Wort enthalten, nach dem ich suche.

Stackoverflow schlug this link als vorherigen Versuch, aber es scheint extrem klobig, da es alle dom Knoten kriecht und viel unklar Code erfordert.

Quelle

2013-08-06 RandallB

Markieren Sie dies als ein Betrüger der Frage, die Sie referenziert haben; Während ich weiß, dass Sie mit den Antworten dort aus Gründen, die Sie gegeben haben, nicht zufrieden sind, ist es immer noch die gleiche Frage, und Sie haben keine spezifischen Anforderungen gegeben, die in der anderen Frage nicht gegeben sind. Die geeignete Vorgehensweise wäre wahrscheinlich, diese Frage mit einem Kopfgeld zu belegen, wenn Sie das einmal können. Ich bin trotzdem neugierig darauf und schaue es mir an. –

* "es scheint extrem klobig, da es alle dom Knoten kriecht" *. Das müssen Sie auf jeden Fall tun. Sie können auch alle Knoten gleichzeitig mit '$ ('*')' auswählen und dann über sie iterieren, aber in jedem Fall müssen Sie alle Knoten durchlaufen. –

Wahrscheinlich benötigen Sie einen erweiterten Selektor wie [jQuery XPath plugin] (https://github.com/ilinsky/jquery-xpath). Wenn Sie sich für die Verwendung von xpath entscheiden, hilft Ihnen vielleicht [diese Antwort] (http://stackoverflow.com/a/2994336/771578) auch. –

Dieses Skript alle Knoten finden, die einen bestimmten Text enthalten. Es erlaubt Ihnen auch, beliebige Stringtests für den Text (Regex usw.) durchzuführen.

function getNodesThatContain(text) { 
    var textNodes = $(document).find(":not(iframe, script, style)") 
     .contents().filter( 
      function() { 
      return this.nodeType == 3 
      && this.textContent.indexOf(text) > -1; 
    }); 
    return textNodes.parent(); 
}; 

console.log(getNodesThatContain("test"));

Hier ist eine Geige für die Prüfung: http://jsfiddle.net/85qEh/4/

PS - Für erhöhte Geschwindigkeit einen anderen Top-Level-Selektor verwenden. Zum Beispiel, wenn Sie nur innerhalb #container benötigen, dann würden Sie var textNodes = $('#container')...

Quelle

2013-08-06 19:39:42

Sicherlich besser lesbar und prägnanter als die Lösung von bobince. +1. Nicht sicher, wie die Leistung jedoch verglichen wird, was von Bedeutung sein könnte. –

Ich habe es nur mit dem Beispiel getestet, das du gezeigt hast http://jsfiddle.net/85qEh/3/ Sieht so aus, als ob Jquery das Ergebnis für dich dupelt. –

Ja, ich habe gerade versucht und das gleiche gefunden - mein Fehler. Tut mir leid, ich habe bereits den Punkt aus meinem Kommentar bearbeitet, nachdem ich bemerkt habe, dass ich einen Fehler hatte und es zu spät ist, um es jetzt wieder zu bearbeiten, also sieht dein Kommentar so aus, als würdest du niemandem antworten. Es tut uns leid. : P –

-2

Try This In JS

$('div >:contains("text Im searching for")')

Quelle

2013-08-06 19:00:50 YashPatel

Der Downvote gehört mir nicht, aber beachten Sie, dass dies Teil der "klobigen" Lösungen in der verknüpften Frage ist. –

Und mehr auf den Punkt, es funktioniert nicht, wie in den Kommentaren zu der anderen Frage erläutert. -1 –

Das Problem, das andere entdeckt haben: http://jsfiddle.net/DM4vz/2/ Wenn Sie ein Elternteil darüber hinzufügen, wird die Suche fehlschlagen. – RandallB

Die Lösung, die in der anderen Frage zur Verfügung gestellt wird, wie oben, aber als nicht hoch angesehene Lösung offenbar Bezug genommen wird, ist dies zu tun:

$("div:contains('searching')").filter(function() { 
    return (
    $(this).clone() //clone the element 
    .children() //select all the children 
    .remove() //remove all the children 
    .end() //again go back to selected element 
    .filter(":contains('searching')").length > 0) 
}).css('border', 'solid 1px black');

I Ich füge hinzu, es ist weniger klobig als das Schreiben einer großen Sache, um alle DOM-Knoten zu crawlen, und sollte wirklich weniger Orte beeinflussen, wenn eng begrenzt.

Wenn jemand andere bessere Ideen hat, bin ich definitiv interessiert.

http://jsfiddle.net/TT7dR/42/

Quelle

2013-08-06 19:08:38 RandallB

Es ist hacky und ineffizient, aber es sieht so aus, als würde es funktionieren (und die Kommentare erklären klar die Logik dahinter). Eine vorläufige +1, aber * sicherlich * gibt es einen kürzeren und saubereren Weg? –

Aber hier sind auch andere divs eingefasst. – WooCaSh

JSFiddle fehlgeschlagen. Ich habe versehentlich den vorherigen Link verwendet, der schlechtes Markup enthielt und sich nicht direkt auf die Frage bezog. Ich habe es aktualisiert und es bietet jetzt einen besseren Einblick. – RandallB

nur Elemente auswählen, die direkt Text

Antwort

Verwandte Themen