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

【问题标题】：JQuery get all data attributes from a listJQuery 从列表中获取所有数据属性
【发布时间】：2013-06-27 14:59:46
【问题描述】：

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

<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 秒运行一次，这可能会相当慢。

【问题讨论】：

要检查.list是否存在，请检查.list的长度

标签： javascript jquery jquery-selectors

【解决方案1】：

你可以使用.map返回一个数组：

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

console.log(dataList.join("|"));

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

【讨论】：

这似乎是一种非常巧妙的方法——之前没有使用过 .map() )

【解决方案2】：

使用这个：

var array = [];

$('li.list').each(function() {
  array.push($(this).data('id'));
})

var joined = array.join('|');

【讨论】：

【解决方案3】：

不是您问题的答案，但这是我最终在此页面上搜索的内容，尽管它会对其他人有所帮助:-)

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)

这会返回一个模仿输入的对象数组
干杯！

【讨论】：