Как добавить классы к элементам li с помощью mootools?

Question

У меня есть этот неупорядоченный список

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Как добавить первый и последний классы к первому и последнему элементу li, чтобы они выглядели так:

<ul>
   <li class="first">Item 1</li>
   <li>Item 2</li>
   <li class="last">Item 3</li>
</ul>

Заранее спасибо.

Answer 1

э-э ... в случае, если вам нужно какое-то повторное использование, верните их и примените класс в процессе, относящемся к родительскому el (ul here):

var mylis = (function(el, decoration) {
    return el.getElements("li:first-child, li:last-child").map(function(li, i) {
        return li.addClass(decoration[i]);
    });
})(document.getElement("ul"), ["first", "last"]);

http://jsfiddle.net/dimitar/Qy3KR/

иначе, просто сделайте (это будет немного быстрее)

var els = document.getElements("ul li:first-child, ul li:last-child");
if (els.length === 2) {
    els[0].addClass("first"); els[1].addClass("last");
}

для mootools 1.1x:

var setFirstLast = function(el, decoration) {
    decoration = decoration || ["first", "last"];
    var lis = el.getElements("li");
    if (lis.legnth < 2)
        return;

    lis[0].addClass(decoration[0]);
    lis.getLast().addClass(decoration[1]);
};

setFirstLast(document.getElement("ul"));

http://jsfiddle.net/dimitar/Qy3KR/1/

и да, сделайтеуверен, что вы запускаете это в обратном вызове domready

например.

window.addEvent("domready", function() {

    setFirstLast(document.getElement("ul"));
});

Answer 2

var $elts = $$('ul > li');
$elts[0].addClass('first');
$elts.getLast().addClass('last');

Документация по API - замечательная вещь.

• Window.$$
• Element.addClass
• Array.getLast

---

Демо: http://jsfiddle.net/mattball/xnswq/