我试图使用jQuery为每个Span元素添加一个不同的类,使用.next() 这是javascript:
<script type="text/javascript">
$(function() {
$("a", "div.top_menu").addClass("ui-icons-custom");
$("span.ui-icon:first", "ul.top_menu_list").addClass("ui-icon-pencil")
.next().addClass("ui-icon-comment")
.next().addClass("ui-icon-key");
});
</script>
这就是HTML我试图让它发挥作用:
<div class="top_menu ui-state-default-custom">
<ul class="ui-widget top_menu_list">
<li>
<span style="float: left;" class="ui-icon-text-custom"><span style="float: left;" class="ui-icon"></span>
<a href="test">Registrarse</a>
</span>
</li>
<li>
<span style="float: left;" class="ui-icon-text-custom"><span style="float: left;" class="ui-icon"></span>
<a href="test1">Agregar un anuncio</a>
</span>
</li>
<li>
<span style="float: left;" class="ui-icon-text-custom"><span style="float: left;" class="ui-icon"></span>
<a href="test2">Ingresar (Login)</a>
</span>
</li>
</ul>
</div>
所以它应该使用.ui-icon类的第一个'span'元素并添加一个类,然后从列表中添加一个类并添加其他类。
答案 0 :(得分:3)
.next()查找您选择的元素的下一个直接兄弟。在您的情况下,您选择的范围有一个锚作为其下一个兄弟,然后什么也没有。你必须使用parent(“li”)返回到父li,使用next()来到列表中的下一个li,然后使用find(“span span”)来获得有问题的范围
选择所有跨度然后单独编辑它们可能更容易,更易读,例如:
$(function() {
$("a", "div.top_menu").addClass("ui-icons-custom");
var $spans = $("span.ui-icon", "ul.top_menu_list");
// end() reverts us back to the selector before each eq()
// you can just make this three separate statements if you like
$spans.eq(0).addClass("ui-icon-pencil").end()
.eq(1).addClass("ui-icon-comment").end()
.eq(2).addClass("ui-icon-key");
});
呃,出于好奇,是什么阻止你直接将类添加到元素而不是使用jQuery来做呢?
答案 1 :(得分:2)