Javascript，如何将标记属性中的所有值放入数组中？

Question

实际上，我需要两个数组，分别来自“ id_play”和“ orden_play”两个属性。

我在这里分享我的代码：

 let id_play = []; let orden_play = []; id_play = $("#listaOrdenable").children().attr('id_play'); orden_play = $("#listaOrdenable").children().attr('orden_play'); 

 <ul id="listaOrdenable" class="s1"> <li orden_play="0" id_play="47"><img src="uploads/meade.jpg" width="40" heigth="40">1</li> <li orden_play="1" id_play="49"><img src="uploads/videoIcon.png" width="40" heigth="40">2</li> <li orden_play="2" id_play="50"><img src="uploads/RARA.jpg" width="40" heigth="40">3</li> <li orden_play="3" id_play="51"><img src="uploads/videoIcon.png" width="40" heigth="40">4</li> </ul> 

Answer 1

这是我的解决方案：

id_play = []
orden_play = []

$("#listaOrdenable").children('li').each(function(){
    id_play.push(this.getAttribute('id_play'));
    id_play.push(this.getAttribute('orden_play'));
});

Answer 2

我正在使用jQuerys $ .each来访问列表中的每个属性。 我在代码末尾添加了2个循环以进行验证。 如果不需要，可以摆脱它们

let id_play = [];
let orden_play =[];

$.each($('#listaOrdenable').children(), function(i,v){
    id_play.push($(this).attr('id_play'));
    orden_play.push($(this).attr('orden_play'));
});

//You can remove these two loops if you don't need them
for(var i in id_play) {
    console.log(id_play[i]);
}
for(var x in orden_play) {
    console.log(orden_play[x]);
}

Answer 3

我有一个简单的javascript解决方案：

const arr1 = [].map.call(document.getElementById('listaOrdenable').querySelectorAll('li'), li => li.getAttribute('orden_play'))

const arr2 = [].map.call(document.getElementById('listaOrdenable').querySelectorAll('li'), li => li.getAttribute('id_play'))

我基本上要做的是从ul选择所有li节点，然后将它们映射并获取所需的属性。 [].map.call的目的是querySelectorAll()返回一个NodeList ，它是一个类似Array的结构。 它没有所有的数组函数，所以我使用的.call方法是在类似数组的结构上使用数组函数的一种方法。

我尚未在jQuery中对其进行测试，但我假设.children()函数将返回示例中的querySelectorAll()返回的内容。

希望这会有所帮助，加油！

Answer 4

最简单的纯JS解决方案：

let id_play = [].slice.call(document.querySelectorAll("li[id_play]"));
let orden_play = [].slice.call(document.querySelectorAll("li[orden_play]"));

此方法使用David Walsh的建议将NodeList转换为Array。 您也可以使用Array.from() 。 看到这个链接 。

但是，我必须再添加一个。 使用ES6 扩展运算符 ，这是迄今为止最优雅的方法。

ES6解决方案：

let id_play = [...(document.querySelectorAll("li[id_play]"))];
let orden_play = [...(document.querySelectorAll("li[orden_play]"))];

Answer 5

您可以在元素listaOrdenable所有子元素上使用JQuery ，然后在相关数组上push您要查找的属性。 检查下一个示例：

 $(document).ready(function() { var id_play = []; var orden_play = []; $("#listaOrdenable").children().each(function() { id_play.push($(this).attr("id_play")); orden_play.push($(this).attr("orden_play")); }); console.log(id_play); console.log(orden_play); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="listaOrdenable" class="s1"> <li orden_play="0" id_play="47"><img src="uploads/meade.jpg" width="40" heigth="40">1</li> <li orden_play="1" id_play="49"><img src="uploads/videoIcon.png" width="40" heigth="40">2</li> <li orden_play="2" id_play="50"><img src="uploads/RARA.jpg" width="40" heigth="40">3</li> <li orden_play="3" id_play="51"><img src="uploads/videoIcon.png" width="40" heigth="40">4</li> </ul> 

在这种情况下，您要将元素保存为整数，则必须使用以下代码：

id_play.push(Number($(this).attr("id_play")));
orden_play.push(Number($(this).attr("orden_play")));

Answer 6

id_play = [] orden_play = []

$（“＃listaOrdenable li”）。each（function（）{ id_play.push($(this).attr('id_play')); id_play.push($(this).attr('orden_play')); } ）;

Answer 7

let id_play = [];
let orden_play = [];

const children = $("#listaOrdenable").children().map((childId, child) => child.attributes);
const getAttrFromChild = (attr) => children.get().map(child => child[attr].value);

id_play = getAttrFromChild("id_play")
orden_play = getAttrFromChild("orden_play")

console.log(id_play, orden_play)