• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Von Selektion ausgehend im Rest nach einem Attribut suchen

blabla333

Mitglied
Wie kann ich prüfen, ob in einer darüberliegenden Ebene (von einer Selektion ausgehend) ein beliebiger Tag mit dem Attribut "data-irgendwas" vorliegt und das erste Ergebnis in einer Variablen übergeben.
Hört sich jetzt wahrscheinlich etwas verwirrend an, deshalb ein Beispiel:

In einem div-Container gibt es folgenden Inhalt:

Code:
<div id="hauptcontainer">
Lorem ipsum dolor.
<p data-irgendwas="2">Lorem ipsum dolor sit amet, <span data-irgendwas="3">consetetur sadipscing elitr, <b>sed diam nonumy</b> eirmod tempor invidunt</span> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
</div>

Es wird nun das Wort "diam" in dem <b>-Tag markiert oder aber der Cursor befindet sich vor dem Wort diam. Nun sollte der Wert "3" ausgegeben werden, da dies von unten nach oben in der Ebene das erste Vorkommen eines solchen Attributes ist. Gibt es nach oben hin kein solches Attribut (würde man z.b. das erste "ipsum" markieren), so wird "0" ausgegeben.
Hätte der span-Tag kein Attribut, so wäre die Ausgabe "2" (von dem p-tag)

Meine Schwierigkeit besteht darin von einer bestimmten Position ausgehen, die vom User definiert wird (entweder der Cursor ist gesetzt oder aber ein Textbereich ist markiert), in den Ebenen nach oben nach einem Attribut zu suchen.
 
Innerhalb der DOM-Hierachie nach oben zu suchen, ist relativ einfach. Dafür gibt es die Funktion closest(). Aber mit was für einem Event willst du überprüfen, ob und welchen Text der User per Maus markiert hat?
 
Ich könnte z.B. über ein mouseup()-Event mit dem Prüfen beginnen und über window.getSelection().toString(); die Selektion erhalten. Aber das Ergebnis ist ja erst einmal keine Position (sondern ein Inhalt bzw. String), deshalb weiß ich hier nicht weiter.
 
Code:
 var range = window.getSelection().getRangeAt(0);
            var newNode = document.createElement("mark");
            range.surroundContents(newNode);
            var ebene = $("mark").closest("div").attr( "data-irgendwas" );
            alert(ebene);

Mit diesem Workaround setze ich um die Selektion einen Tag "mark". Von diesem aus - dachte ich - könnte ich dann das nächste gesuchte Attribut finden.

Danach den mark-tag wieder entfernen...
 
Zuletzt bearbeitet:
Ohne jQuery:

Code:
function searchAttributeFromField( obj ) {
  if( !obj.getAttribute("data-irgendwas") ) {
   return searchAttributeFromField( obj.parentNode );
 }
 return obj;
}
 
Ich komme aber in einer weiteren Aufgabe irgendwie nicht auf den parentNode.
Code:
            var sel = window.getSelection();
            if (sel.rangeCount) {
                var container = document.createElement("div");
                for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                    container.appendChild(sel.getRangeAt(i).cloneContents());
                }
                html = container.innerHTML;
            }

In diesem Falle möchte ich nicht nach einem attribut suchen, sondern einfach prüfen, ob genau eine ebene darüber ein bestimmter Tag gesetzt ist oder mit anderen Worten: Ist die Auswahl bereits von einem Tag (z.B. <b>) umgeben? Das kann dann für mich interessant sein, wenn man in einem fett markierten Satz nur ein Wort markiert. Ich möchte dann aber dennoch wissen, dass es als fett markiert ist. So wie ich es jetzt extrahiere, fehlt mir diese Information.
 
Zurück
Oben