Getting value from all div with same class using pure javascript

Question

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 comma separated format like

['123456', '33333']

Please advise.

You need to loop through the out0 NodeList

Luca Kiebel
– Luca Kiebel

2018-01-13 16:02:43 +00:00
Commented Jan 13, 2018 at 16:02 — Luca Kiebel
– Luca Kiebel, Commented Jan 13, 2018 at 16:02
Is this code complete?

Mrigank Pawagi
– Mrigank Pawagi

2018-01-13 16:04:47 +00:00
Commented Jan 13, 2018 at 16:04 — Mrigank Pawagi
– Mrigank Pawagi, Commented Jan 13, 2018 at 16:04

Mixone · Accepted Answer · 2018-01-13 16:17:04Z

4

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

edited Jan 13, 2018 at 16:17

answered Jan 13, 2018 at 16:11

Mixone

1,3261 gold badge13 silver badges24 bronze badges

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

Comments

Tim · Accepted Answer · 2018-01-13 23:42:12Z

1

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.com/spread-vs-array-from-1/1

edited Jan 13, 2018 at 23:42

answered Jan 13, 2018 at 17:37

Tim

1,08213 silver badges15 bronze badges

2 Comments

Birjolaxew Over a year ago

[...arrLike] is a lot shorter than Array.from(arrLike), and is often faster

Tim Over a year ago

Good call, it is slightly faster. I think Array.from() is a little more clear though. I'll add your suggestion.

guest271314 · Accepted Answer · 2018-01-13 16:11:16Z

0

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>

answered Jan 13, 2018 at 16:11

guest271314

1

Comments

Ivan86 · Accepted Answer · 2018-01-13 16:47:13Z

0

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>

edited Jan 13, 2018 at 16:47

answered Jan 13, 2018 at 16:41

Ivan86

5,7182 gold badges16 silver badges30 bronze badges

Comments

Pratyush Sharma · Accepted Answer · 2018-01-13 16:05:54Z

-1

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

edited Jan 13, 2018 at 16:05

answered Jan 13, 2018 at 16:04

Pratyush Sharma

2672 silver badges7 bronze badges

1 Comment

guest271314 Over a year ago

There should not be a "." at selector string

Akar · Accepted Answer · 2018-01-13 16:13:26Z

-1

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);

answered Jan 13, 2018 at 16:13

Akar

5,4353 gold badges27 silver badges40 bronze badges

Collectives™ on Stack Overflow

Getting value from all div with same class using pure javascript

6 Answers 6

querySelectorAll

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

querySelectorAll

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related