Ziel ist die erste Ebene der <li>s und nicht die verschachtelten <li>s

Question

Ich habe das folgende HTML:

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

Wie kann ich mit jQuery die ERSTE Ebene der <li> s?

Ich muss zum Beispiel die Schrift fett machen, wenn ich den Mauszeiger auf die <li> s mit den Buchstaben A, B und C, aber NICHT diesen Schriftstil auf die verschachtelten <li> s (mit dem Namen Unterabschnitte ).

Hier ist ein erstes jsfiddle DEMO wenn Sie es verwenden möchten.

Danke.

EDIT -

Lösung:

UNTERGEORDNETE SELEKTOREN so lautet die Antwort.

jQuery ist nicht erforderlich, dies kann mit CSS geschehen.

Hier ist die aktualisierte DEMO

EDIT - Hier ist ein übersichtlichere Demo

Danke,

Answer 1

Haben Sie einen Container <div> mit einer Klasse, und verwenden Sie die > Selektor. Nehmen wir an, die Klasse Ihres Container-Divs ist "myclass":

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

Anmerkung: Die > Selektor funktioniert im IE6 und darunter nicht, wenn er als CSS-Selektor verwendet wird. Er funktioniert jedoch in allen anderen Browsern, einschließlich IE7 und IE8, und wenn er in JQuery verwendet wird, funktioniert er in allen von JQuery unterstützten Browsern, einschließlich IE6.

Answer 2

Sie könnten dies tun:

$('ul > li:not(:has(ul))');

Es wäre jedoch besser, Ihre oberste Ebene mit <ul> eine ID, damit Sie sie mit einem gültigen CSS-Selektor ansteuern können:

$('#topUL > li')

Answer 3

UNTERGEORDNETE SELEKTOREN so lautet die Antwort.

jQuery ist nicht erforderlich, dies kann mit CSS geschehen. Ziel der ersten Ebene li Elemente mit einem Selektor:

ul > li {
    font-weight: bold;
}

Und dann das Styling für tiefere Schichten rückgängig machen li Elemente:

ul > li li {
    font-weight: normal;
}

Hier ist die aktualisierte DEMO .

Answer 4

Ich würde eine Regel festlegen, die auf alle li-Elemente abzielt, und dann eine weitere, die diese Regel außer Kraft setzt und auf verschachtelte li-Elemente abzielt.

li{font-weight:bold;}
ul ul li{font-weight:normal;}

Verschachtelte li-Elemente wären normal gewichtet und die oberste Ebene wäre fett.

Answer 5

Ich glaube nicht, dass Ihr Problem vollständig gelöst wurde (obwohl es einige gute Ansätze gab). Ihr Beispielproblem befasst sich mit der Anwendung eines Stils auf ein übergeordnetes Element und verhindert, dass das untergeordnete Element den Stil erbt, was ein CSS-Problem ist.

Sie könnten die Listenelemente durch die Kenntnis des übergeordneten Elements anvisieren (wie bereits erwähnt). Dann fügen Sie eine Klasse auf Hover.

$('div > ul > li').hover(function(){
    $(this).addClass('myHover');
},
function(){
    $(this).removeClass('myHover');
});

Und Ihr CSS würde die Klasse für die Eltern und einen negierenden Stil für die Kinder haben:

.myHover { font-weight: bold; }
.myHover li { font-weight: normal; }