使用纯javascript从同一个类中获取所有div的值 [英] Getting value from all div with same class using pure javascript

查看:98
本文介绍了使用纯javascript从同一个类中获取所有div的值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要获取同一类div中所有产品的id。我的代码只给了我第一个产品的ID。

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.

这是 html 代码

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

我创建了这个 javascript 代码来获取value

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

但此代码仅返回 123456 而不是 33333
我想以逗号分隔格式获取两个ID,如

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']

请建议。

推荐答案

querySelectorAll



而不是使用 querySelector 使用 querySelectorAll 来ge a NodeList 要解析的元素。

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

这篇关于使用纯javascript从同一个类中获取所有div的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆