如何将"class“属性添加到HTML元素？

Question

我有下面的HTML。我想向每个列表中的最后一个li元素添加class="last"属性。我该怎么做呢？

<div class="gpbscol">
<ul class="listl">
    <li>ACCESSORIES</li>
    <li>AMPLIFIERS</li>
    <li>ANALOG AUDIO PROCESSING</li>
    <li>MICROPHONE PREAMPLIFIERS</li>
    <li>MICROPHONES</li>
    <li>SPEAKERS/MONITORS</li>
    <li>STUDIO</li>
    <li>DIGITAL AUDIO PROCESSING</li>
    <li>CONSOLES, MIXERS</li>
    <li>DAWS/PERIPHERALS</li>
</ul>
</div>
<div class="audio"> 
   <ul class="listl">
    <li>DAWS/PERIPHERALS</li>
    <li>LOUDSPEAKERS — FOH</li>
    <li>RECORDERS/PLAYERS</li>
    <li>HEADPHONES</li>
    <li>MICROPHONES - WIRELESS CONVERTERS</li>
    <li>NETWORK AUDIO / CONTROL / SNAKES</li>
    <li>COMPUTER AUDIO INTERFACES</li>
    <li>INTERCONNECTS</li>
    <li>LOUDSPEAKERS — STAGE MONITORS</li>
    <li>ACOUSTIC TREATMENT</li>
    <li>MI PRODUCTS</li>
   </ul>
</div>

所以最后一个元素可能是

<li class="last">MI PRODUCTS</li>

Answer 1

使用jQuery会更容易做到这一点：

$(function(){
    $("ul.listl li:last").addClass("last");
});

这就是全部，伙计们:)

Answer 2

我会成为一个造型问题。如果我没有客户端代码的选择，我会选择CSS样式。你可以考虑这样的问题：

ul.listl li:last-child { }

Answer 3

我同意@JohnHartsock，但是如果你想按自己的方式去做，你可以使用各种各样的库来帮助你查询html元素(DOM)。

1. Fizzler
2. Sharp-Query
3. HTML Agility Pack