I need to get the id's of all products that are in divs with the same class. My code is only giving me the first product's id.

Here is the html code

<td>
    <div class="b-sku">SKU: 123456</div>
</td>
<td>
    <div class="b-sku">SKU: 33333</div>
</td>

I created this javascript code to just fetch value

function (){
    var out0 = document.querySelector('.b-sku').textContent;
    var out1 = out0.replace(/SKU:/g, "");
    var out2 = out1.replace(/\s/g, '');
    return out2;
}

But this code is only returning 123456 and not 33333 I would like to get both the ids in ma separated format like

['123456', '33333']

Please advise.

I need to get the id's of all products that are in divs with the same class. My code is only giving me the first product's id.

Here is the html code

<td>
    <div class="b-sku">SKU: 123456</div>
</td>
<td>
    <div class="b-sku">SKU: 33333</div>
</td>

I created this javascript code to just fetch value

function (){
    var out0 = document.querySelector('.b-sku').textContent;
    var out1 = out0.replace(/SKU:/g, "");
    var out2 = out1.replace(/\s/g, '');
    return out2;
}

But this code is only returning 123456 and not 33333 I would like to get both the ids in ma separated format like

['123456', '33333']

Please advise.

• javascript
• jquery
• html

• You need to loop through the out0 NodeList – Luca Kiebel Commented Jan 13, 2018 at 16:02
• Is this code plete? – Mrigank Pawagi Commented Jan 13, 2018 at 16:04

6 Answers 6

querySelectorAll

Instead of using querySelector use querySelectorAll to ge a NodeList of elements to parse.

function getBSKU() {
  var bSku = document.querySelectorAll('.b-sku');
  return Array.prototype.map.call(bSku, function(node) {
    var out1 = node.textContent.replace(/SKU:/g, "");
    var out2 = out1.replace(/\s/g, '');
    return out2;
  });
}

console.log(getBSKU())

<td>
  <div class="b-sku">SKU: 123456</div>
</td>
<td>
  <div class="b-sku">SKU: 33333</div>
</td>

And now you sort through the elements with the Array given

Here is a short 1 line approach to get a new array with the format like ['123456', '33333'] using Array.from, Object.values, and Map.

ES6 Version

Using Array.from()

let out2 = Array.from(document.getElementsByClassName('b-sku'), el => el.textContent.replace(/SKU: /i,""))

Using Object.values()

let out2 = Object.values(document.getElementsByClassName('b-sku')).map(el => el.textContent.replace(/SKU: /i,""))

Using the spread operator(...) (fastest)

let out2 = [...document.getElementsByClassName('b-sku')].map(el => el.textContent.replace(/SKU: /i,""))

Performance Test: https://jsperf./spread-vs-array-from-1/1

You can use .querySelectorAll() instead of .querySelector(), which returns the first matching element only, spread element to convert NodeList to Array, .map() to return the array

function replaceSKU() {
  var skus = document.querySelectorAll('.b-sku');
  return [...skus].map(function(el) {
    return el.textContent.replace(/SKU:|\s/g, "");
  })
}

console.log(replaceSKU())

<td>
  <div class="b-sku">SKU: 123456</div>
</td>
<td>
  <div class="b-sku">SKU: 33333</div>
</td>

You can use .getElementsByClassName() to get a list of all the elements that have the given class name, then remove the first five characters of each innerHTML and add the rest to the result list.

Here is an example:

function returnID()
{
  var elements = document.getElementsByClassName('b-sku');
  var out = [];
  
  for(var i =0; i < elements.length; i++)
  { 
     out.push(elements[i].innerHTML.substr(5));
  }
  
  return out;
}

console.log( returnID() );

<table>
<tr>
  <td>
  <div class="b-sku">SKU: 123456</div>
  </td>
  <td>
  <div class="b-sku">SKU: 33333</div>
  </td>
</tr>
</table>

Use document.getElementsByClassName('some-class') and loop through the nodes and create a list using their text content or inner text.

You should use document.querySelectorAll().

and map over them.

// Create an array from the NodeList, so we can use other array functions.
var elements = Array.from(document.querySelectorAll('.b-sku'));

// Basically a loop and setting the value to the ids
var ids = elements.map(element => {
      return element.textContent.replace(/SKU:|\s/g, "");
});


console.log(ids);