1. Zuhause
  2. Frage und Antwort
  3. JQuery Selektor zu Tabelle mit N Zeilen

JQuery Selektor zu Tabelle mit N Zeilen

2017-02-25 3 views
2

Ich habe ein div mit zwei Tabellen. Ich möchte die Zeilen nur aus der einen Tabelle mit N Zeilen auswählen.JQuery Selektor zu Tabelle mit N Zeilen

In XPath würde ich verwenden:

//div[@class="div1"]/table[count(tr) = 2]/tr

Gibt es einen jQuery-Selektor Ausdruck, der das Gleiche tun?

Hier ist der HTML-Snippet:

<div> 
    <div class="div1"> 
    <ul> 
     <li>Line 1</li> 
    </ul> 
    <ul> 
     <li>Line 1</li> 
     <li>Line 2</li> 
    </ul> 
    </div>  
</div>

Ich habe gehofft, dies in einem einzigen jQuery-Selektor Ausdruck getan werden könnte (zum Beispiel in diesen Interactive JQuery Tester verstanden). Mein Ausgangspunkt ist:

'div.div1 ul li'

sondern wählt auch die Reihen von der ersten Tabelle, die nur 1 Zeile hat.

Natürlich ist der "richtige Weg", dies zu tun, IDs oder etwas anderes zum HTML hinzuzufügen, so dass die Tabelle eindeutig identifiziert werden kann. In diesem Fall habe ich jedoch keine Kontrolle über den HTML-Code . Der einzige Weg, ich kann sagen, welche der mehreren Tabellen aus der Anzahl der Zeilen zu verwenden ist.

Quelle

2017-02-25 Stephen Gornick

+1

Offensichtlich ist mein HTML-Schnipsel nicht für eine

. Hoppla. Kopiert und eingefügt von der falschen Quelle. Wie auch immer, die Antwort, die ich gewählt habe, ist korrekt, da der gleiche Ansatz verwendet wird, um Zeilen einer Tabelle genauso gut zu selektieren wie Zeilen aus einer Liste. –

Antwort

2

Ja, Sie können dies mit einem einzigen jQuery-Selektor tun.

In Ihrem Fall könnten Sie einfach die :has() selector kombinieren, die :eq() selector und die :last-child pseudo class um ein ul Element auszuwählen, die zwei li Kinder Elemente. Beachten Sie, dass der Selektor :eq() einen Index akzeptiert, der auf Null basiert (was bedeutet, dass wir einen Index von 1 verwenden würden, um das zweite li Element auszuwählen). Die :last-child Pseudoklasse wird dann verwendet, um sicherzustellen, dass das zweite li tatsächlich das letzte untergeordnete Element ist.

$('.div1 ul:has(li:eq(1):last-child)')

Snippet:

$('.div1 ul:has(li:eq(1):last-child)').addClass('selected');
.selected { color: #f00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <div class="div1"> 
 
    <ul> 
 
     <li>Line 1</li> 
 
    </ul> 
 
    <ul> 
 
     <li>Line 1</li> 
 
     <li>Line 2</li> 
 
    </ul> 
 
    <ul> 
 
     <li>Line 1</li> 
 
     <li>Line 2</li> 
 
     <li>Line 3</li> 
 
    </ul> 
 
    </div>  
 
</div>

Alternativ können Sie auch die :nth-child() pseudo class auch nutzen.

$('.div1 ul:has(li:nth-child(2):last-child)')

Snippet:

$('.div1 ul:has(li:nth-child(2):last-child)').addClass('selected');
.selected { color: #f00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <div class="div1"> 
 
    <ul> 
 
     <li>Line 1</li> 
 
    </ul> 
 
    <ul> 
 
     <li>Line 1</li> 
 
     <li>Line 2</li> 
 
    </ul> 
 
    <ul> 
 
     <li>Line 1</li> 
 
     <li>Line 2</li> 
 
     <li>Line 3</li> 
 
    </ul> 
 
    </div>  
 
</div>

Quelle

2017-02-25 21:09:38

Verwandte Themen

 Verwandte Themen