如何使用mootools为li元素添加类？

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

呃......如果你需要一些重用，返回他们在应用类过程，与父母e​​l有关（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.1倍：

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/

是的，确定哟你可以在回调中运行这个

例如。

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/