Js/Jquery：如何过滤距离数据-距离？答案

【问题标题】：Js/Jquery: how to filter on distance data-distance?Js/Jquery：如何过滤距离数据-距离？
【发布时间】：2017-07-26 14:10:38
【问题描述】：

我有以下物品：

<div class="user" data-distance="400">user2</div>
<div class="user" data-distance="500">user2</div>
<div class="user" data-distance="600">user3</div
<div class="user" data-distance="700">user4</div>

如何显示距离=600的人）

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用.filter()、.end()、.show()、.hide()

$("[data-distance]")
.filter(function(i, el) {
  return +$(el).data("distance") < 600
})
.show()
.end()
.filter(function(i, el) {
  return +$(el).data("distance") >= 600
}).hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user" data-distance="400">user2</div>
<div class="user" data-distance="500">user2</div>
<div class="user" data-distance="600">user3</div>
<div class="user" data-distance="700">user4</div>

【讨论】：

【解决方案2】：

您可以使用jQuery filter 方法和data 来获取距离。这将返回过滤后的元素，您可以使用这些元素替换父元素的 html 或在本例中为 body。

$('body').html($(".user").filter(function() {
  return $(this).data('distance') < 600
}))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user" data-distance="400">user1</div>
<div class="user" data-distance="500">user2</div>
<div class="user" data-distance="600">user3</div>
<div class="user" data-distance="700">user4</div>

【讨论】：

【解决方案3】：

// Use [].forEach.call() to loop over all $('.user'):
[].forEach.call($('.user'), function (div) {
    // you need to make wrap it (it's just a bare HTMLElement)
    div = $('div');
    // get the distance
    var distance = div.data('distance');
    // ignore if distance is absent
    if (distance != null) {
        // If data-distance is defined in the HTML source,
        // then you can use the selector ".user[data-distance]".
        // If you defined it with element.data('distance', 42),
        // then the selector would be unreliable.
        if (+distance < 600) {
            // hide:
            distance.css('display', 'none');
        } else {
            // show:
            distance.css('display', 'inherit');
        }
    }
});

【讨论】：