Simplifying some jquery with array and loop

Question

I have the following jQuery code which at the moment works perfectly well:

$("#post-27") // select your element 
.hover(function(){ // trigger the mouseover event
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});

$("#post-102") // select your element 
.hover(function(){ // trigger the mouseover event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});

$("#post-81") // select your element 
.hover(function(){ // trigger the mouseover event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});

$("#post-95") // select your element 
.hover(function(){ // trigger the mouseover event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});

$("#post-99") // select your element 
.hover(function(){ // trigger the mouseover event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
});

I've previously asked for help in making jQuery code more efficient and was able to using an array with help from others here. However, an array alone wouldn't work here I think I need to use some kind of loop which can tell which of the 5 variables I'm on, and applies the toggle class event appropriately.

For example, I could do something with an array like:

var $ids = ["#post-27", "#post-102", "#post-81", "#post-95", "#post-99"],

$ids.forEach(function(v) {
    if($(v).mouseIsOver()) {
        $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
    } else {
        $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
    }
});

The trouble is the #post-X.isotope-item selectors change depending on which part of the array the forEach function is cycling through. Is there a way of telling which variable is currently being used? I can't explain what I mean in programming terms but in plain English:

if current variable being processed = "the variable", then don't toggle classes
else
toggleClass...

Then I could add that check to each of the toggleClass parts and it would work, I think. I'm still new to jQuery/javascript and don't know how to proceed, hopefully I've explained it well enough.

Any help would be greatly appreciated.

PS: I can't use pure CSS hover because the elements are not nested. I'm not sure is there are any advantages or disadvantages to .hover / .mouseIsOver

I thought about this but even though they are, if I hovered over the last sibling I would still have to travel back up the DOM to instigate the change with the previous 4 adjacent siblings... which I don't think is possible with CSS. — patrickzdb
– patrickzdb, Commented Oct 8, 2013 at 18:58

Johnathan Hok · Accepted Answer · 2013-10-08 18:24:20Z

It looks like what you want to achieve is when you hover over an item, all the other items (minus the one you're currently hovered over) get some type of style. The key here is the not selector when choosing which items to add or remove classes from.

http://jsfiddle.net/AWWLL/

<style>
.item {
    width: 100px;
    height: 100px;
    background-color: #000;
    margin: 0;
    list-style: none;
    cursor: pointer;
}

.dim {
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    opacity: 0.5;
}
</style>

<script>
$(function() {
    $('.item').hover(function() {
        $('.item').not(this).addClass('dim');
    }, function() {
        $('.item').not(this).removeClass('dim');
    }); 
});
</script>

<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

codeguerrilla · Accepted Answer · 2013-10-08 18:13:24Z

1

It sounds like you could make use of jquery :not selector. Here is a simple example you can copy and paste into a file and run in the browser to see how it works:

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<div class="adult">
  <span>Homer</span>
</div>
<div>
  <span>Bart</span>
</div>
<div class="adult">
  <span>Marge</span>
</div>
<div>
  <span>Lisa</span>
</div>
<div>
  <span>Maggie</span>
</div>

<script>
    $( "div:not('.adult')" ).css( "background-color", "yellow" );
</script>

</body>
</html>

Hope this helps.

answered Oct 8, 2013 at 18:13

codeguerrilla

4825 silver badges17 bronze badges

1 Comment

patrickzdb Over a year ago

Thanks, I chose Jonathon's answer because he was first.

Christophe · Accepted Answer · 2013-10-08 19:16:45Z

1

To follow up on my comment, jQuery has a convenient siblings() method in your case:

$(".isotope-item")
    .hover(function(){ // trigger the mouseover event
        $(this).siblings().toggleClass('dim-portfolio-item');
    }, function(){ // trigger the mouseout event
        $(this).siblings().toggleClass('dim-portfolio-item');
    });

answered Oct 8, 2013 at 19:16

Christophe

28.3k29 gold badges104 silver badges145 bronze badges

1 Comment

patrickzdb Over a year ago

Thank you, this is great to know too.

Collectives™ on Stack Overflow

Simplifying some jquery with array and loop

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related