CODEWITHSUNDEEP
javascriptjqueryhoverjquery-hoversiblings
Zach Both
Zach Both

Reputation: 119

Selecting all elements EXCEPT siblings and self

Two unordered lists. When hovering over one list item I need to darken the list items in the other list, but not the hovered list item's own siblings.

With the code below I'm able to darken all other list items but the one being hovered, but I can't seem to get the siblings into the equation.

HTML:

<ul>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
</ul>
<ul>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
</ul>

JQUERY:

$('.tn').hover(
function() {
    $(".tn:not(:hover)").not(this).css({"-webkit-filter":"brightness(15%)"});
},
function() {
    $(".tn").css({"-webkit-filter":"brightness(100%)"});
}
);

And for anyone who suggests I should just do the hover over the entire unordered list, it's not possible because of certain restrictions of the design :/

Upvotes: 1

Views: 724

Answers (3)

charlietfl
charlietfl

Reputation: 171679

You want the opposite ul so lets traverse to the parent of current one, and jump over to the other

$('.tn').hover(function(){
   var $currentList = $(this).parent();
   var $otherListItems = $currentList.siblings('ul').find('.tn');
   $otherListItems.doSomething();

},function(){
  /* similar */

})

Upvotes: 0

rooobertek
rooobertek

Reputation: 300

html:

<ul class="tnparent">

javascript:

$('.tnparent:not(:hover) .tn').css({"-webkit-filter":"brightness(15%)"})

Upvotes: 1

Barmar
Barmar

Reputation: 780851

Use .closest('ul') to find this list, and then operate just on its siblings.

$('.tn').hover(
  function() {
    var thislist = $(this).closest('ul');
    var otherlists = thislist.siblings('ul');
    otherlists.find('.tn').css({
      "-webkit-filter": "brightness(15%)"
    });
  },
  function() {
    $(".tn").css({
      "-webkit-filter": "brightness(100%)"
    });
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
</ul>
<ul>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
  <li class="tn">
    <img class="tn-img" src="http://lorempixel.com/360/200" />
  </li>
</ul>

Upvotes: 0

Related Questions