select multiple array elements javascript

Question

Is there a way to select multiple array elements at once?

I have this code:

var my_array = ["a", "b", "c", "d", "e", "f"];

I would like to select 1st, 3rd, 5th, 7th, 9th element from the array at the same time, something like this

my_array[0,2,4,6,8];

Answer 1

The easiest way, if you must use JavaScript, would be to set up a simple function, to which you pass the array and the indices:

function modifyStylesOf(arr, indices, prop, newValue) {

    // here we filter the array to retain only those array elements
    // are present in the supplied 'indices' array:
    arr.filter(function(el, index) {

      // if the index of the current element is present in the
      // array of indices the index will be zero or greater,
      // so those elements will be retained (as the assessment
      // will be true/truthy:
      return indices.indexOf(index) !== -1;

    // we iterate over the retained Array elements using
    // Array.prototype.forEach():
    }).forEach(function (el) {

      // and here we update the passed-in property
      // to the passed-in value:
      el.style[prop] = newValue;
    });
}

Then call with:

// here we use Array.from() to convert the nodeList/HTMLCollection
// into an Array:
modifyStylesOf(Array.from(c), [1,3,5,7,9], 'webkitTextFillColor', 'transparent');

 function modifyStylesOf(arr, indices, prop, newValue) { arr.filter(function(el, index) { return indices.indexOf(index) !== -1; }).forEach(function(el) { el.style[prop] = newValue; }); } var c = document.querySelectorAll('body div'); modifyStylesOf(Array.from(c), [1, 3, 5, 7, 9], 'webkitTextFillColor', 'orange');

 div { counter-increment: divCount; } div::before { content: counter(divCount, decimal-leading-zero); }

 <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

Bear in mind, though, that your original selector included all childNodes (which necessarily includes textNode s, and HTML comment nodes (among, potentially, others); whereas it seems you want only HTMLElement s; for that I'd strongly suggest using a slightly different means of selection:

// the Element.children property will retrieve only
// element nodes:
var c = document.getElementById("nc-2").children;

Or:

// using document.querySelectorAll(), with a CSS
// selector can select only elements (as with CSS),
// though I'd suggest something more specific than
// the universal selector ('*') to specify which
// child elements to select:
var c = document.querySelectorAll('#nc-2 > *');

Further, though without seeing your HTML it's rather hard to be particularly precise, it seems that you're trying to select only the odd-numbered indices of the childNode s, which lends itself to using CSS only to achieve your goal. In your specific case that would be:

#nc-2 > :nth-child(odd) {
  -webkit-text-fill-color: transparent;
}

 body > div:nth-child(odd) { -webkit-text-fill-color: orange; } div { counter-increment: divCount; } div::before { content: counter(divCount, decimal-leading-zero); }

 <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

Answer 2

 var myArray = ["a", "b", "c", "d", "e", "f"]; var myIndices = [0, 2, 4, 6, 8]; var result = []; myIndices.forEach(i => result.push(myArray[i])); console.log(result);

(undefined because some of these indices are off the end of the data).

Answer 3

现在最简单的方法是使用 map 函数：

[0,2,4,6,8].map(x=>my_array[x]);

Answer 4

In Javascript, you can loop through the code like this below:

var c = document.getElementById("nc-2").childNodes;
for(var count=0; count < c.length; c++){
  //this condition is used to test for odd indexes
  if(count%2 !== 0){      
    c[count].style.webkitTextFillColor="transparent"; 
  }
}

Answer 5

This is where something like jQuery can actually come in handy because it can operate on collections:

$("#nc-2").children(":odd").css("-webkit-text-fill-color", "transparent");

You can do this without jQuery of course, but you have to loop yourself.

document.querySelectorAll("#nc-2 > :nth-child(odd)").forEach(
  elem => elem.style.WebkitTextFillColor = "transparent"
);

 document.querySelectorAll("#nc-2 > :nth-child(odd)").forEach(elem => elem.style.backgroundColor = "purple")

 div > div { background-color: blue; width: 50px; height: 50px; margin: 5px; display: inline-block; }

 <div id="nc-2"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

Answer 6

You can try with a good old forEach :

document.getElementById("nc-2").childNodes.forEach(function (node, index) {
  if ([1,3,5,7,9].indexOf(index) >= 0) { node.style.webkitTextFillColor="transparent"; }
});

Answer 7

After you convert your Node List into an array like var childNodes = [...nodeList] then the rest is like this;

 var childNodes = ["child0","child1","child2","child3","child4","child5","child6","child7","child8","child9"], selectedNodes = childNodes.reduce((p,c,i) => i & 1 ? p.concat(c) : p,[]); console.log(selectedNodes);

Note: i & 1 is true when i is odd.

Answer 8

or the filter function

const indexes = [0,2,4,6,8];
    
my_array.filter((v,i)=>indexes.includes(indexes));

although this is O(n*m) so the map function from @tommyleejones is faster since that doesn't have to compare values but rather uses indexes to its only O(n)