Selettore CSS per il targeting solo per bambini immediati e non per altri discendenti identici

Question

Ho un elenco ordinabile nidificato che può avere elementi aggiunti o rimossi dinamicamente e può essere nidificato in livelli nidificati. Durante la nidificazione, un nuovo elemento ul viene iniettato in qualunque elemento li viene selezionato per essere il genitore. Lo stato iniziale della lista è qualcosa di simile al seguente:

<ul id="parent"> 
    <li id="One"><a href="" class="listLink"><span class="position">1</span>One</a></li> 
    <li id="Two"><a href="" class="listLink"><span class="position">2</span>Two</a></li> 
    <li id="Three"><a href="" class="listLink"><span class="position">3</span>Three</a> 
     <ul> 
      <li id="A"><a href="" class="listLink"><span class="position">1</span>A</a></li> 
      <li id="B"><a href="" class="listLink"><span class="position">2</span>B</a></li> 
      <li id="C"><a href="" class="listLink"><span class="position">3</span>C</a></li> 
      <li id="D"><a href="" class="listLink"><span class="position">4</span>D</a></li> 
      <li id="E"><a href="" class="listLink"><span class="position">5</span>E</a></li> 
      <li id="F"><a href="" class="listLink"><span class="position">6</span>F</a></li>      
     </ul> 
    </li> 
    <li id="Four"><a href="" class="listLink"><span class="position">4</span>Four</a></li> 
    <li id="Five"><a href="" class="listLink"><span class="position">5</span>Five</a></li> 
    <li id="Six"><a href="" class="listLink"><span class="position">6</span>Six</a></li>      
</ul> 

sto usando MooTools per fare il genere, ecc, e funziona bene, ma sto avendo problemi nel reimpostare il testo della posizione correttamente sul tipo . Ogni selettore CSS che cerco di utilizzare include anche tutti gli dei bambini piuttosto che solo gli elementi li che appartengono all'elenco e non appartengono ai sottolisti. Supponiamo che, eccetto ID, posizione e testo, ogni elemento li in tutti gli elenchi sia identico a tutti gli altri. C'è un selezionatore per ottenere solo i bambini immediati? c'è un altro modo per fare ciò?

ho provato alcuni selettori bambino come quelli citati:

• ul > li selezionerà tutti gli elementi li che sono un figlio di un ul, non solo i figli immediati
• #parent > li fa lo stesso come sopra .

Ecco la funzione che sto eseguendo correntemente quando un oggetto viene rilasciato, che non gestisce l'ordinamento, che funziona bene, semplicemente aggiornando la posizione. Si noti che è anche la sintassi MooTools:

var drop = function(el){ 
    el.getParents('ul').reverse().each(function(item){ 
     var posCount = 1; 
     item.getElements('li a span[class=position]').each(function(pos){ 
      pos.set('text', posCount); 
      posCount++; 
     }); 
    }); 
} 

Attualmente, cambiando qualsiasi ordine elemento al livello principale sarà rinumerazione tutto 1-12, anche le sottoliste. La modifica di qualsiasi elemento in una sottolista fornisce i numeri corretti per quella lista, ma fa in modo che gli elenchi genitori contengano tutti gli elementi figlio li nella numerazione in modo errato.

mi sento come questo è un brutto hack, ma funziona:

var drop = function(){ 
    var ulCount = 1; 
    $$('ul').each(function(item){ 
     if(item.get('id') != 'parent') { 
      item.set('id', 'id-'+ulCount); 
     } 
     var elId = item.get('id'); 
     var posCount = 1; 
     $(document).getElements('#'+elId+'>li>a>span[class=position]').each(function(pos){ 
      pos.set('text', posCount); 
      posCount++; 
     }); 
     ulCount++; 
    }); 
} 

Answer 1

ul > li 

fa solo i bambini immediati. Così, per esempio, per fare solo gli elementi migliori della lista di livello è possibile utilizzare:

#parent > li 

Nota: questo non è supportato su IE6.

La soluzione comune per la compatibilità all'indietro è quello di fare qualcosa di simile:

#parent li { /* style appropriately */ } 
#parent li li { /* back to normal */ } 

E 'più noioso perché si deve applicare gli stili e poi spegnerli (e non si può necessariamente sapere che cosa i vecchi valori sono) ma è l'unica soluzione alternativa allo IE6 per CSS.

Modifica: Ok hai un problema specifico di MooTools. getElements() restituisce tutti i discendenti, non solo i bambini immediati. Prova a utilizzare getChildren().

var drop = function(el){ 
    el.getParents('ul').reverse().each(function(item){ 
     var posCount = 1; 
     item.getChildren("li").getElements("a span[class=position]").each(function(pos){ 
       pos.set('text', posCount); 
       posCount++; 
     }); 
    }); 
} 

o qualcosa del genere.

Answer 2

La domanda originale non ha avuto risposta.: only-child funziona solo se l'unico-child non ha figli discendenti. Il post originale suggeriva che l'inclusione di figli discendenti era dovuta a ul> li mentre in realtà era dovuta a un bug in: only-child. Paradossalmente: first-child seleziona il primo figlio in una lista con figli discendenti, come fa l'ultimo figlio, ma: only-child no. Ho controllato questo in Firefox, Opera e Chrome. Ecco un esempio:

<!DOCTYPE html> 
<html lang="en"> 
<head><meta charset="utf-8"> 
<style> 
.list>ul>li:only-child {color:red} 
.list>ul>li:first-child {color:green} 
.list>ul>li:last-child {color:blue} 
</style> 
</head> 
<body> 
<div class="list"> 
<ul><li>Item one</li><ul> 
<l>Subitem one</li> 
<li>Subitem two</li></ul></li><!--<li>Item two</li> 
<li>Item three</li>--> 
</ul></div> 
</body></html> 

Per attivare: first-child e: last-child regole rimuovere il commento le ultime due voci. L'implementazione di Selectors Level 3 standard è quindi incoerente nei principali browser. La regola: first-child non deve essere attivata quando esiste una regola: only-child e un figlio univoco ha discendenti. Nell'esempio l'unico-bambino dovrebbe essere rosso ma è verde.