jquery - :not(:last-child) not working with label-wrapped list item

Question

一个简单的 CSS 问题。我有一些带有复选框的列表项，我想让整个元素可单击。很简单...只需将其包裹在复选框的标签中即可。这有效。这是我的两个问题(我将它们都放在这里是因为我认为它们可能是由同一件事引起的)。

问题: 我试图使用 :not(:last-child) 在每个列表项之间放置分隔线(最后一个除外)，但遇到了麻烦。

Here's a jsFiddle

<小时/>

HTML

<div class="box50">
    <div class="filterFolder">Companies<i class="icon-caret-down"></i></div>
    <ul id="companies">
        <li><label><input type="checkbox" name="checkbox" value="value" /> Apple</label></li>
        <li><label><input type="checkbox" name="checkbox" value="value" /> Microsoft</label></li>
        <li><label><input type="checkbox" name="checkbox" value="value" /> Google</label></li>
    </ul>
    <div class="filterFolder">People<i class="icon-caret-down"></i></div>
    <ul id="people">
        <li><label><input type="checkbox" name="checkbox" value="value" /> Mark Zuckerberg</label></li>
        <li><label><input type="checkbox" name="checkbox" value="value" /> Steve Jobs</label></li>
        <li><label>><input type="checkbox" name="checkbox" value="value" /> Bill Gates</label></li>
    </ul>
    <div class="filterFolder">(+) Add New</div>
</div>

<小时/>

CSS

ul li {
    font-size:12px;
    padding:2px 7px;
    border-bottom:1px dashed #EFEFEF; 
}
    ul li:hover {
        background:#EFEFEF;
        cursor:pointer;
    }
    .listSelected {
        background:red;
    }

Answer 1

这是两个不同的问题。

第一个问题是由于您的 html 无效。仅li可以是 ul 的子级。 label不是一个有效的 child 。解决方案很简单:将 <label> 包裹起来在 <li>而不是相反，并相应地改变你的风格规则。

您的第二个问题是由于正在检查的标签的输入的默认操作导致一些奇怪的行为导致标签上的单击事件再次触发(即两次)。我无法解释这一点，但一个简单的解决方案是检查输入是否已检查，以确定是否应该添加该类，因为“检查”发生在第二次触发 click 之前。 .

if ($(this).find('input').prop('checked')) {
    $(this).addClass("listSelected");
}
else {
    $(this).removeClass("listSelected");
}

http://jsfiddle.net/ExplosionPIlls/GFcvf/