javascript - 如何使用 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

呃...如果您需要重用，请返回它们并在流程中应用与父 el 相关的类(此处为 ul):

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"));
});