JQuery CSS выберите первый и последний список UL формы LI

Question

обращайтесь за помощью, пожалуйста, к селектору JQuery CSS. Я хочу идентифицировать первый и последний LI из основного списка UL и изменить класс CSS. Первое должно быть class="grid_4 alpha" и последнее class="grid_4 omega"

<ul>
    <li id="linkcat-2" class="grid_4 this should be alpha"><h4 class="widgettitle">Blogroll</h4>
     <ul class='xoxo blogroll'>
      <li><a href="http://wordpress.com/">WordPress.com</a></li>
      <li><a href="http://wordpress.org/">WordPress.org</a></li>
     </ul>
</li>
<li id="linkcat-2" class="grid_4"><h4 class="widgettitle">Blogroll</h4>
 <ul class='xoxo blogroll'>
  <li><a href="http://wordpress.com/">WordPress.com</a></li>
  <li><a href="http://wordpress.org/">WordPress.org</a></li>
 </ul>
</li>
<li id="linkcat-2" class="grid_4"><h4 class="widgettitle">Blogroll</h4>
 <ul class='xoxo blogroll'>
  <li><a href="http://wordpress.com/">WordPress.com</a></li>
  <li><a href="http://wordpress.org/">WordPress.org</a></li>
 </ul>
</li>
<li id="linkcat-2" class="grid_4 this should be omega"><h4 class="widgettitle">Blogroll</h4>
 <ul class='xoxo blogroll'>
  <li><a href="http://wordpress.com/">WordPress.com</a></li>
  <li><a href="http://wordpress.org/">WordPress.org</a></li>
 </ul>
</li>
</ul>

Я просто не могу заставить работать правильную функцию JQuery.css.

Помощь очень ценится - я могу добавить идентификатор мастера UL при необходимости

Answer 1

Используйте :first-child и :last-child с дочерним (>) селектором:

$("#master > :first-child").addClass("grid_4 alpha");
$("#master > :last-child").addClass("grid_4 omega");

Имейте в виду, что в классах не должно быть пробелов. Эта разметка:

<li class="grid_4 alpha">...

определяет элемент списка, который имеет два класса. Если вы хотите выбрать его, вы можете использовать:

$("li.grid_4.alpha")...

означает, что выберите все элементы списка, которые имеют как классы grid_4 , так и alpha.

Answer 2

Вы должны использовать следующие селекторы:

http://api.jquery.com/first-selector/

http://api.jquery.com/last-selector/

например:.

$("ul li:first").addClass("alpha");
$("ul li:last").addClass("omega");

Answer 3

$('ul > li:first').addClass('alpha');
$('ul > li:last').addClass('omega');

Эй, помните конец Под Планетой Обезьян ? Это было довольно круто, с большой бомбой и всем прочим. Ой, надеюсь, я никому ее не отдал!

Answer 4

Одна вещь, которая может вызвать проблемы в вашем примере, это то, что вы присвоили один и тот же идентификатор многим элементам:

id="linkcat-2"

Идентификатор должен быть уникальным.

Однако, вот как вы выбираете первый и последний:

<ul id="main">
    <li>One</li>
    <li>Two
        <ul>
            <li>Two A</li>
            <li>Two B</li>
        </ul>
    </li>
    <li>Three</li>
    <li>Four
        <ul>
            <li>Two A</li>
            <li>Two B</li>
        </ul>
    </li>
</ul>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    alert($("#main > :first-child").text());
    alert($("#main > :last-child").text());
</script>

Answer 5

Как насчет этого:

$('ul li:first').addClass('alpha');
$('ul li:last').addClass('omage');

Надеюсь, это поможет:)