Question

我有以下项目：

<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的div.user？（隐藏距离> = 600的那些）

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用.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>

Answer 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');
        }
    }
});

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

3 个答案: