JQuery从列表中获取所有数据属性

JQuery get all data attributes from a list

本文关键字：数据属性 获取 列表 JQuery      更新时间：2023-09-26

我有一个长的动态生成的列表，每个列表都有相同的类标识符和类似于下面代码的数据属性：

<ul>
    <li class="list" data-id="123">One</li>
    <li class="list" data-id="124">Two</li>
    <li class="list" data-id="125">Three</li>
    <li class="list" data-id="126">Four</li>
    .....etc
</ul>

我试图实现的是获得所有的data-id值，并将其格式化如下：

123|124|125|126....etc

然后通过ajax将其传递到一个页面，并检查id是否存在于数据库中。

var delimited_data="";
$('.list').each(function(){
    delimited_data+=$(this).data('id')+"|";
});
console.log(delimited_data);

我之所以问这个问题，是因为我正在开发一个实时系统，该系统在10分钟后自动将列表列中的项目部署给不同的用户。我只需要确保代码运行正确：）

我还需要检查页面上是否没有.list类（即没有方法进行查询）delimited_data是否会完全为空，我很确定它会是空的。

在这种情况下，有没有比使用.each()更好的方法呢？因为我发现它可能会很慢，记住上面的函数将每30秒运行一次。

您可以使用.map返回数组：

var dataList = $(".list").map(function() {
    return $(this).data("id");
}).get();
console.log(dataList.join("|"));

演示：http://jsfiddle.net/RPpXu/

使用此：

var array = [];
$('li.list').each(function() {
  array.push($(this).data('id'));
})
var joined = array.join('|');

不是你问题的答案，但这就是我在这个页面上搜索的内容，尽管它会帮助其他人：-）

var arrayOfObj = $('input').map(function() {
  return {
            name : $(this).attr('name'),
            data : $(this).data('options'),
            value : $(this).val(),
            id : $(this).attr('id')
         }
}).get();
console.log(arrayOfObj)

这将返回一个模拟输入的对象数组
干杯

作为@tymeJV答案的更新，您可以使用.map((index, elem) => return value)，如下所示：

let result = $(".list").map((index, elem) => elem.dataset.id).get().join('|');
相关文章：