Wie generiere ich einen eindeutigen CSS-Selektor für das DOM-Element?
Ich muss einen eindeutigen CSS-Selektor für Elemente erzeugen.
Insbesondere habe ich onclick Event-Handler, die sich erinnern sollten, welches Zielelement
wurde geklickt und diese Info an meinen Server gesendet. Gibt es eine Möglichkeit, dies ohne DOM-Modifikationen zu tun?
P.S. mein JavaScript-Code soll auf verschiedenen
laufen
Websites von Drittanbietern, so kann ich keine Annahmen über HTML machen.
6 Antworten
Nehmen wir an, Sie haben der Einfachheit halber eine Liste von Links: Sie können einfach den Index des auslösenden Elements in der Sammlung aller Elemente übergeben
%Vor% die js (jQuery 1.7+, ich habe .on() verwendet sonst% bind() ) Funktion kann
, so dass, wenn Sie auf den dritten Element-Indexwert klicken, der Wert 2 ist. (0-basierter Index);
Dies gilt natürlich, solange sich der Code (das DOM) nicht ändert. Später können Sie diesen Index verwenden, um eine CSS-Regel für dieses Element zu erstellen, z. mit :nth-child
Andernfalls, wenn jedes Ihrer Elemente ein anderes Attribut (wie eine ID) hat, können Sie dieses Attribut übergeben
Beispiel für JsFiddle: Ссылка
Ja, das könntest du tun. Aber mit ein paar Vorbehalten. Um sicherzustellen, dass Selektoren eindeutig sind, müssen Sie :nth-child() verwenden, was nicht allgemein unterstützt wird. Wenn Sie diese CSS-Selektoren dann in CSS-Dateien einfügen möchten, funktioniert dies nicht in allen Browsern.
Ich würde es mit so etwas tun:
%Vor% Fügen Sie das dann Ihrem Click-Handler für jedes Element hinzu, das Sie modellieren möchten. Ich überlasse es Ihnen, getChildNumber() zu implementieren.
Bearbeiten: Habe gerade deinen Kommentar dazu gelesen, dass es sich um einen 3rd-Party-Code handelt ... also kannst du ein event -Argument hinzufügen, alle Instanzen von this durch event.target ersetzen und dann einfach anhängen die Funktion zu window click event, wenn das einfacher ist.
Sie könnten wahrscheinlich den DOM-Baum vom Knoten zurück zum body-Element durchqueren, um einen Selektor zu erzeugen.
Firebug verfügt über eine Funktion, die beide XPath- und CSS-Selektoren verwendet.
Siehe diese Antwort
Ich muss einen eindeutigen CSS-Selektor für Elemente erzeugen.
Insbesondere habe ich onclick Event-Handler, die sich erinnern sollten, welches Zielelement
wurde geklickt und diese Info an meinen Server gesendet. Gibt es eine Möglichkeit, dies ohne DOM-Modifikationen zu tun?
P.S. mein JavaScript-Code soll auf verschiedenen
laufen
Websites von Drittanbietern, so kann ich keine Annahmen über HTML machen.
Sie könnten wahrscheinlich den DOM-Baum vom Knoten zurück zum body-Element durchqueren, um einen Selektor zu erzeugen.
Firebug verfügt über eine Funktion, die beide XPath- und CSS-Selektoren verwendet.
Siehe diese Antwort
Ja, das könntest du tun. Aber mit ein paar Vorbehalten. Um sicherzustellen, dass Selektoren eindeutig sind, müssen Sie %code% verwenden, was nicht allgemein unterstützt wird. Wenn Sie diese CSS-Selektoren dann in CSS-Dateien einfügen möchten, funktioniert dies nicht in allen Browsern.
Ich würde es mit so etwas tun:
%Vor%Fügen Sie das dann Ihrem Click-Handler für jedes Element hinzu, das Sie modellieren möchten. Ich überlasse es Ihnen, %code% zu implementieren.
Bearbeiten: Habe gerade deinen Kommentar dazu gelesen, dass es sich um einen 3rd-Party-Code handelt ... also kannst du ein %code% -Argument hinzufügen, alle Instanzen von %code% durch %code% ersetzen und dann einfach anhängen die Funktion zu %code% click event, wenn das einfacher ist.
Diese Funktion erstellt einen langen, aber praktischen Selektor, der schnell arbeitet.
%Vor%Beispielergebnis:
%Vor%Der folgende Code erstellt einen etwas schöneren und kürzeren Selektor
%Vor%Beispielergebnis:
%Vor%Sie können dies versuchen. ohne jquery zu benutzen.
Überprüfen Sie diese CSS-Auswahlgeneratorbibliothek @ medv / finder
- Erzeugt kürzeste Selektoren
- Eindeutige Selektoren pro Seite
- Stabile und robuste Selektoren
- 2,9 kB gzip und Größe verkleinern
Beispiel für generierten Selektor:
%Vor%Nehmen wir an, Sie haben der Einfachheit halber eine Liste von Links: Sie können einfach den Index des auslösenden Elements in der Sammlung aller Elemente übergeben
%Vor%die js (jQuery 1.7+, ich habe %code% verwendet sonst% %code% ) Funktion kann
sein %Vor%, so dass, wenn Sie auf den dritten Element-Indexwert klicken, der Wert 2 ist. (0-basierter Index); Dies gilt natürlich, solange sich der Code (das DOM) nicht ändert. Später können Sie diesen Index verwenden, um eine CSS-Regel für dieses Element zu erstellen, z. mit %code%
Andernfalls, wenn jedes Ihrer Elemente ein anderes Attribut (wie eine ID) hat, können Sie dieses Attribut übergeben
Beispiel für JsFiddle: Ссылка
Tags und Links javascript dom css-selectors