JavaScript: How to skip over current item in array during a for loop? (continue?)

Question

EDIT: I don't want to skip index 1. I want to skip the current (clicked on) element. Also, see below for more of the code as requested. You'll see that I have a class CatListItem and five instances of that class in an array allCatListItems.

Here's some context for the question: I have a list of cats. When I click on a cat's name (list item), I want that cat's picture and other info to be appended to the page (got that down). When a cat is clicked, I also want any other cat that is being displayed to be hidden (that way there is only one cat on the screen at a time).

I'm trying to accomplish this with a for loop, but obviously if it iterates over every item in the array, then when I click an item, the cat being clicked will be hidden as well.

I want to skip the current item in the array and only run the code on the other items. Using continue, I know I can skip a specific item (item 1 in the below example). This will run my code on every item in the array except that at index one. But how can I make that continue dynamic? Meaning... how can I hide all of the cats, except the one being currently clicked?

Here's the loop that skips index 1:

CatListItem.prototype.hideCats = function() {
    allCatListItems.forEach(function(cat) {
        cat.a.addEventListener('click', function() {
            for (var i = 0; i < allCatListItems.length; i++) {
                if (i === 1) {
                    continue;
                }
                allCatListItems[i].img.className = 'hide';
            };
        });
    });
}

var allCatListItems = [
    catListItem1 = new CatListItem('El', 'images/el.jpg', 'el'),
    catListItem2 = new CatListItem('Widdle Baby', 'images/widdle-baby.jpg',     'widdle-baby'),
    catListItem3 = new CatListItem('Mama', 'images/mama.jpg', 'mama'),
    catListItem4 = new CatListItem('Legion', 'images/legion.jpg', 'legion'),
    catListItem5 = new CatListItem('Boy', 'images/boy.jpg', 'boy'),
];

EDIT: Here's a fiddle.JSFIDDLE Click the names to see the functionality without the hideCats function. Then uncomment where it says to to see my issue.

I'm starting to think maybe a for loop isn't the best option?

get the item clicked index on click then if(i === index) continue; — Danilo Silva
– Danilo Silva, Commented Apr 20, 2016 at 18:30
You need to identify and skip over the desired element. How to do it will depend on your actual code, which you didn't provide, but will likely be a comparison between this and the current element in the list. — user1106925
– user1106925, Commented Apr 20, 2016 at 18:32
How are you creating the variable allCatListItems. You can make sure you don't add the clicked element into this variable at aall and normal for loop will work fine... — Rajshekar Reddy
– Rajshekar Reddy, Commented Apr 20, 2016 at 18:40
@DaniloSilva how to do that? Perhaps provide it in an answer? — Zach Nagatani
– Zach Nagatani, Commented Apr 20, 2016 at 18:41

Zach Nagatani · Accepted Answer · 2016-04-20 20:25:02Z

1

In that case compare the event.target(its the element clicked)

EDIT: allCatListItems[i] needs it's .a property attached to it in the if statement (this is what contains the anchor element). This is because the event listener is grabbing an anchor tag, so e.target will be returning an anchor tag as well. The if statement will never return as true if you aren't comparing the same type of element.

cat.a.addEventListener('click', function(e) {
    for (var i = 0; i < allCatListItems.length; i++) {
       if (allCatListItems[i].a === e.target) {
           continue;
       }
       allCatListItems[i].img.className += ' hide';
    }
});

Here is a jsfiddle, it doesn't use the same element names, but it should be doing what you want. https://jsfiddle.net/5qb4rwzc/

edited Apr 20, 2016 at 20:25

Zach Nagatani

3011 gold badge4 silver badges13 bronze badges

answered Apr 20, 2016 at 18:30

jemiloii

25.9k9 gold badges58 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user1106925 Over a year ago

else wouldn't be necessary. The original code works. They're asking how to target the specific cat.

serebit Over a year ago

I would recommend setting display: none on the cats not being clicked and setting display: block on the cat being clicked.

Zach Nagatani Over a year ago

Sorry, I'm not actually trying to skip over index 1. I have THAT working, but I want to skip over the current element being clicked. Also, I do use display:none to hide them, thank you! :)

jemiloii Over a year ago

you just need to compare what is being clicked to what you want to change.

Zach Nagatani Over a year ago

I understand the logic, but what does e.target actually return to me? I tried it and that code doesn't work.

|

Danilo Silva · Accepted Answer · 2016-04-20 18:40:58Z

0

$('li').on('click', function() {
    var index = $(this).index();
  var items = document.getElementsByTagName('li');
  for(var i = 0; i < items.length; i++) {
    if(i === index) continue;
    items[i].style = "display:none;";
  }
});

answered Apr 20, 2016 at 18:40

Danilo Silva

6122 gold badges7 silver badges16 bronze badges

1 Comment

Zach Nagatani Over a year ago

I think I get what you are trying to do. Can you share in vanilla js and not jquery?

Leng · Accepted Answer · 2016-04-20 19:10:02Z

0

Its really depend on how you call the function "hideCat". Realizing that each time that function is called, more eventListeners are add to every cat item. Each time a cat is clicked, more than one event fired. Perhaps you should re-structure how to attach eventListeners to each cat item.

answered Apr 20, 2016 at 19:10

Leng

11 bronze badge

Collectives™ on Stack Overflow

JavaScript: How to skip over current item in array during a for loop? (continue?)

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related