javascript - 通过数据属性获取元素id

Question

我有以下 html 输出:

...
<ul id="commentlist">
    <li id="comment-12" data-post="post-1">Comment 1 for post 1</li>
    <li id="comment-34" data-post="post-1">Comment 2 for post 1</li>
    <li id="comment-56" data-post="post-1">Comment 3 for post 1</li>
</ul>
<ul id="commentlist">
    <li id="comment-78" data-post="post-2">Comment 1 for post 2</li>
    <li id="comment-90" data-post="post-2">Comment 2 for post 2</li>
</ul>
...

请帮助我用 jQuery 生成 2 个 demental 数组(如下所示):

array = [
    "post-1": ["comment-12", "comment-34", "comment-56"],
    "post-2": ["comment-78", "comment-90"] 
]

我试过:

jQuery("li[data-post]").each(function(){
    /*console.log(jQuery(this)); -- this contains necessary "id" but I don't know how to fetch it*/

    var testdata = jQuery(this).data('post');
    if (comment_lists.indexOf(testdata) == -1)
        comment_lists.push(testdata);
});

Answer 1

使用 each() 方法迭代元素并根据数据属性在内部生成对象。

var obj = {};

// select elements with the attribute and iterate
$('[data-post]').each(function() {
  // get data attribute value
  var d = $(this).data('post');
  // define the property if not already defined
  obj[d] = obj[d] || [];
  // push the id of element
  obj[d].push(this.id)
})

console.log(obj)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="commentlist">
  <li id="comment-12" data-post="post-1">Comment 1 for post 1</li>
  <li id="comment-34" data-post="post-1">Comment 2 for post 1</li>
  <li id="comment-56" data-post="post-1">Comment 3 for post 1</li>
</ul>
<ul id="commentlist">
  <li id="comment-78" data-post="post-2">Comment 1 for post 2</li>
  <li id="comment-90" data-post="post-2">Comment 2 for post 2</li>
</ul>