Iterate through the entire array without including a specific item

Question

Iterate through the entire array without including a specific item

I am struggling with looping through an array of items and applying some code to each item while excluding one specific item (the clicked-on item). I have experimented with using splice, but that method ends up removing the array item completely, whereas I just want to skip over it. Specifically, I am trying to remove a CSS class from each item in the array except for the excluded one.

I have attempted different approaches, such as using splice and also trying conditional statements like if (array[i] == 3 || (i - 1) = 2) { continue; else { .... }, but none of them seem to work successfully.

var array = ["item1", "item2", "item3"];
 var i;
 for (i = 0; i < items.length; i++) {
     if(array[i] is the excluded one){
             skip over}
  else { $(items[i]).removeClass('class');
 }

Although no error messages are being displayed, the code is not functioning as expected.

javascript arrays for-loop

Answer 1

Answer №1

Utilize the continue

In this particular scenario, we aim to eliminate "item2" and adhere to fixed variable naming/reference:

var items = ["item1", "item2", "item3"];
var i;
for (i = 0; i < items.length; i++) {
  if(items[i] === "item2"){
    continue;
  }

   //$(items[i]).removeClass('class');
   document.write(items[i] + "<br>");
}

Answer 2

Utilize the continue

In this particular scenario, we aim to eliminate "item2" and adhere to fixed variable naming/reference:

var items = ["item1", "item2", "item3"];
var i;
for (i = 0; i < items.length; i++) {
  if(items[i] === "item2"){
    continue;
  }

   //$(items[i]).removeClass('class');
   document.write(items[i] + "<br>");
}

Answer 3

Answer №2

Here is a solution that could meet your requirements:

<script type="text/javascript">
    $(document).ready(function(){
        $(".click").click(function(){ //When an element with the class click is clicked
               var items = ["item1", "item2", "item3"];
               var i;
               var itemid = this.id; 
               for (i = 0; i < items.length; i++) { //loop through array
                    if(items[i]==itemid){ //check if current array item matches id of clicked element
                        // This is the clicked item, so do nothing
                    }else{
                        $("#"+items[i]).removeClass('removeme'); // Remove 'removeme' class from other elements
                    }
               }
        });
    });
</script>
<div class="item1 click removeme" id="item1">Test1</div>
<div class="item2 click removeme" id="item2">Test2</div>
<div class="item3 click removeme" id="item3">Test3</div>

Answer 4

Here is a solution that could meet your requirements:

<script type="text/javascript">
    $(document).ready(function(){
        $(".click").click(function(){ //When an element with the class click is clicked
               var items = ["item1", "item2", "item3"];
               var i;
               var itemid = this.id; 
               for (i = 0; i < items.length; i++) { //loop through array
                    if(items[i]==itemid){ //check if current array item matches id of clicked element
                        // This is the clicked item, so do nothing
                    }else{
                        $("#"+items[i]).removeClass('removeme'); // Remove 'removeme' class from other elements
                    }
               }
        });
    });
</script>
<div class="item1 click removeme" id="item1">Test1</div>
<div class="item2 click removeme" id="item2">Test2</div>
<div class="item3 click removeme" id="item3">Test3</div>

Answer 5

Answer №3

Do the elements in the array correspond to the IDs of the elements? If so, make sure to include the "#" indicator in your code.

$('#' + items[i]).removeClass('class')

UPDATE - I just noticed that you named your array "array", but reference it as items in the else block

   var items= ["item1", "item2", "item3"];
   var i;
   for (i = 0; i < items.length; i++) {
       if(items[i] is the excluded one){
               skip over}
    else { $('#' + items[i]).removeClass('class');
    }

I still believe there might be a better approach to this issue - try using consistent names and see if that resolves it.

Answer 6

Do the elements in the array correspond to the IDs of the elements? If so, make sure to include the "#" indicator in your code.

$('#' + items[i]).removeClass('class')

UPDATE - I just noticed that you named your array "array", but reference it as items in the else block

   var items= ["item1", "item2", "item3"];
   var i;
   for (i = 0; i < items.length; i++) {
       if(items[i] is the excluded one){
               skip over}
    else { $('#' + items[i]).removeClass('class');
    }

I still believe there might be a better approach to this issue - try using consistent names and see if that resolves it.

Answer 7

Answer №4

An elegant approach in functional programming:

const items = ["apple", "orange", "banana"];

// item to exclude
const exclude = "orange";

// using filter to retain only items that are not excluded
const newItems = items.filter((item) => { return item !== exclude } );

// looping through the remaining items
newItems.forEach((item) => { $(item).removeClass("highlight"); });

Answer 8

An elegant approach in functional programming:

const items = ["apple", "orange", "banana"];

// item to exclude
const exclude = "orange";

// using filter to retain only items that are not excluded
const newItems = items.filter((item) => { return item !== exclude } );

// looping through the remaining items
newItems.forEach((item) => { $(item).removeClass("highlight"); });

Iterate through the entire array without including a specific item

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Performing an RxJS loop to retrieve the httpGet response, followed by executing httpPut and httpPost requests based

Encountering an issue with the for loop in React Native when using FlatList

Deciphering the intricacies of VUEX-STORE modules

Struggling to retrieve information from a JSON file and display it within a component?

Both if and else statements are carrying out code in JavaScript/jQuery

Unable to show message upon form submission with ajax

Guide on exporting data from ejs files to a pdf file using pdfkit in a node js environment

Steps to halt webkit animation within a div located inside a circle:

The html carousel displays stacked images instead of scrolling

Incorporating jQuery to Load Content into a DIV while preserving the original JavaScript

"Double the Data: A D3.js JSON Tale of Two Creators

What are the best methods for rebooting a Node.js project?

I am looking to efficiently store and access a collection of form elements, where each group is represented as an array of form elements

Angular directive for dynamic template inclusion

How can we include identical item names within a single JavaScript object?

Stop the setTimeout function after redirecting in the controller

Executing python code from a JavaScript (Node.js) program without the need to create a child process

Managing the attention on a switch button

I am encountering an issue with the Node library puppeteer when trying to integrate it with vue.js

Looking for precise information within a Vue b-table by fetching data from an Axios API