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

Answer 2

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

API文档是一件很棒的事情。

演示：http://jsfiddle.net/mattball/xnswq/

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

2 个答案: