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

时间:2013-06-27 14:59:46

标签: javascript jquery jquery-selectors

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

<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秒运行一次。

3 个答案:

答案 0 :(得分:50)

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

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

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

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

答案 1 :(得分:5)

使用此:

var array = [];

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

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

答案 2 :(得分:1)

不是你的问题的答案,但这是我最终在这个页面搜索,虽然它会帮助其他人: - )

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)

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