2016-07-27 14 views
1

Ich habe diese CSS-Selektor:Wie kann man inneres Webelement mit CSS-Selektoren ausschließen?

$("td.cv-table-panel-element") 

, die eine Liste von Elementen zurückgibt, wie sie in der Abbildung unten angezeigt:

List of elements returned by selector

Alle diese Elemente sind Spalten einer Tabelle und jeder Spalte Inhalt ist anders. Das erste Element in dieser Liste enthält eine Checkbox:

Contents of the first element

ich dieses Element aus der ursprünglichen Liste ausschließen mag.

Bitte beachten Sie, dass das Ignorieren des ersten Elements hier nicht funktioniert, da dieses Kontrollkästchen nicht konsistent ist und nicht immer angezeigt wird. Daher muss es spezifisch von einer seiner inneren Klassen ausgeschlossen werden.

Ich habe folgende ohne Glück versucht:

$("td.cv-table-panel-element:not(.cv-checkbox)") 

Irgendwelche Vorschläge?

+2

Sie müssen sehr spezifisch sein, ob Sie sich für eine jQuery oder CSS-Selektor suchen. jQuery verfügt über eine Reihe von proprietären Selector-Funktionen, die mit den meisten CSS-Selektorimplementierungen wie Selenium nicht kompatibel sind (basierend auf Ihrer Verwendung des Begriffs "webelement" in Ihrer Frage), sofern Sie keinen jQuery-spezifischen Treiber verwenden. – BoltClock

+0

Vielen Dank für Ihren Kommentar. Ihre Beobachtung ist in der Tat korrekt, ich verwende sie für Selenium-Automatisierung. Tatsächlich mangelt es mir an Verständnis für die Unterschiede zwischen jQuery und CSS-Selektoren. Wenn Sie mich auf einige Quellen hinweisen könnten, wo ich mich mit diesen beiden Konzepten auseinandersetzen kann, werde ich Ihnen dankbar sein! Danke noch einmal. –

Antwort

1

Hier ist eine reine CSS Option:

td.cv-table-panel-element:not([align="center"]) 

Dieser Selektor verwendet die :not functional notation und ein attribute selector.

Hier ist ein Beispiel:

/* td elements are red */ 
 
.cv-table-panel-element { background-color: red;} 
 

 
/* td elements that DO NOT have the align="center" attribute are blue */ 
 
.cv-table-panel-element:not([align="center"]) { background-color: aqua; } 
 

 
td { height: 100px; width: 100px; }
<table> 
 
    <tr> 
 
    <td class="cv-table-panel-element"></td> 
 
    <td class="cv-table-panel-element"></td> 
 
    <td class="cv-table-panel-element" align="center"></td> 
 
    <td class="cv-table-panel-element"></td> 
 
    <td class="cv-table-panel-element" align="center"></td> 
 
    </tr> 
 
</table>

Verwandte Themen