如何从属性中收集信息并将其作为数组发送？

Question

我想让一个JavaScript数组包含用户的类.user-status的id，通过使用ajax发送给PHP。

这是我的HTML：

<div class="user-status" data-userid="159"></div>
<div class="user-status" data-userid="221"></div>
<div class="user-status" data-userid="3321"></div>
<div class="user-status" data-userid="13112"></div>

这是我的JavaScript：

$('.user-status').each(function() {
    $(this).attr('data-userid');
});

var users = ["", "", "", ""];

jQuery.ajax({
    url: ajaxURL,
    data: {
        action : 'user_status',
        usersid: users
    },
    dataType: 'JSON',
    type: 'POST',
    success: function (response) {

    }
});

直到这里我无法继续我无法使用户的id数组可以发送它。

Answer 1

你可以这样做：

var users = [];
jQuery('.user-status').each(function() {
    users.push($(this).attr('data-userid');
});

我从一个空数组开始，否则你最终得到一个包含8个项目的数组，其中四个是空字符串。

Answer 2

您还可以使用jquery的数据属性，例如

var users = [];

$('.user-status').each(function() {
    users.push($(this).data('userid'));
});

Answer 3

将用户标识推送到数组中。

$('.user-status').each(function() {
    users.push($(this).attr('data-userid'));
});

Answer 4

你可以使用函数map和函数$.toArray()

var users = $('.user-status').toArray().map(function(elem) {
    return $(elem).data('userid');
});

Answer 5

使用Array.from可以避免创建一个空数组并推送。

console.log(Array.from($('.user-status'), function(element) {
return $(element).data("userid")
}))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-status" data-userid="159"></div>
<div class="user-status" data-userid="221"></div>
<div class="user-status" data-userid="3321"></div>
<div class="user-status" data-userid="13112"></div>