Question

我有一个简单的列表，我需要通过单击第一个元素来删除样式selected。有人可以提供一些信息吗？

HTML：

<ul id="select-list">
    <li value="null">All</li>
    <li value="1" class="selected">1</li>
    <li value="2" class="selected">2</li>
</ul>

CSS：

#select-list li{
   border: 1px solid #ECECEC;
      /* margin-left: -15px; */
    overflow-x: auto;
    font-size: 10px;
    padding: 2px;
    margin-bottom: 5px;
    cursor: pointer;
}

.selected{
  border: 1px solid red !important;
}

jQuery的：

jQuery('#select-list li').click(function(){
        console.log(jQuery(this).siblings());

        if(jQuery(this).val() == 'null')
            jQuery(this).siblings('li').removeClass('selected')
    });

http://jsfiddle.net/nonamez/pKGcD/

Answer 1

您无法在val()上使用li - 它仅适用于字段。我建议添加一个data-value属性，然后可以使用.data('value')来阅读 - 或者更有用的是在您的情况下用于属性选择器：#select-list li[data-value="null"]。

所以：

<ul id="select-list">
    <li data-value="null">All</li>
    <li data-value="1" class="selected">1</li>
    <li data-value="2" class="selected">2</li>
</ul>

和

jQuery('#select-list li[data-value="null"]').click(function(){
    jQuery(this).siblings('.selected').removeClass('selected')
});

实例：http://jsfiddle.net/7QcwY/

Answer 2

试试这个：

$('#select-list li:first').parent().find('.selected').removeClass('selected');

Answer 3

“value”的属性导致访问它的问题，将其更改为valueset并且非常简单。

 $("#select-list>li").click(function () {
  if ($(this).attr('valueset') == "null") {
    $('.selected ').removeClass('selected ');
  }
});

编辑：在回应评论时，这里有一些隔离的选项，没有特别的顺序：

$('#select-list li.selected').removeClass('selected');

$(this).parent().find('.selected').removeClass('selected');

$('#select-list>li.selected').removeClass('selected');
//probably the best one selecting only direct decendant of the list that contain class- check performance to see if that fits

$('#select-list').find('li.selected').removeClass('selected');

$(this).siblings('.selected').removeClass('selected');
//only works if current one does not have this class that needs removed

$(this).siblings('.selected').andSelf().removeClass('selected');
//current one does have this class that also needs removed

 $('#select-list').children('li.selected').removeClass('selected');

我们在这里看到它的实际效果：http://jsfiddle.net/XKz3N/5/

编辑：重新发布到jQuery版本1.8和1.9 +。

在jQuery 1.8版中，创建了addBack()方法，在版本1.9中删除了andSelf()。对于jQuery 1.8和转发，请使用：

$(this).siblings('.selected').addBack().removeClass('selected');

在此代码中，效果将是相同的。 addBack()还强调了一个选择器，以便在需要时减少添加回选择组的元素。

如何删除所有父级孩子的课程？

3 个答案: