CODEWITHSUNDEEP
jquerysiblings
Kin
Kin

Reputation: 4596

How to remove class for all parent children?

I have a simple list and i need to remove style selected by clicking on firs element. Can someone provide some info?

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/

Upvotes: 3

Views: 5690

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

The attribute of "value" causes issues accessing it, changed it to valueset and it is pretty simple. 

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

EDIT: In reponse to comments, here are some options for isolation in no particular order:

$('#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');

Here we see it in action: http://jsfiddle.net/XKz3N/5/

EDIT: Relevent to jQuery version 1.8 and 1.9+.

In jQuery version 1.8, the addBack() method was created and in version 1.9 the andSelf() was removed. For jQuery 1.8 and forward, please use:

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

In this code, the effect would be the same. addBack() also implimented a selector to reduce the elements added back to the selection group in case that is needed.

Upvotes: -1

Jamiec
Jamiec

Reputation: 136094

You cannot use val() on an li - it only works for fields. I suggest adding a data-value attribute which can then be read using .data('value') - or more usefully in your case be used for an attribute selector: #select-list li[data-value="null"].

So:

<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>

and:

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

Live example: http://jsfiddle.net/7QcwY/

Upvotes: 3

A. Wolff
A. Wolff

Reputation: 74420

Try this:

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

Upvotes: 2

Related Questions