我有一个项目列表,可以通过单击将其删除。
仅当列表中有一项时,我才需要第一项成为突出显示。我已经尝试通过点击事件做到这一点。 但是,如果没有.click(),是否可以做到这一点?原因是此列表正在与其他列表动态交互,该列表项可能会被其他功能更改。
<ul id="container">
<li>1</li>
<li class="fixed">2</li>
<li>3</li>
<li class="fixed">4</li>
<li>5</li>
</ul>
$('#container').delegate('li', 'click', function() {
$(this).remove();
});
$('#container').click(function(){
if ($('#container').children().length == 1) {
$("#container li:first-child" ).css( "background-color", "#fff2ac" );
}
}
您可以仅使用CSS并执行一条规则来检查li
是否既是:first-child
又是:last-child
-
.container li:first-child:last-child {
background-color: red;
}
<h5>List With Many Items</h5>
<ul class="container">
<li>1</li>
<li class="fixed">2</li>
<li>3</li>
<li class="fixed">4</li>
<li>5</li>
</ul>
<h5>List With One Item</h5>
<ul class="container">
<li>1</li>
</ul>
<h5>List With Two Items</h5>
<ul class="container">
<li>1</li>
<li class="fixed">2</li>
</ul>