Question

所以我有一个包含一些div的页面，这些div都具有数据排名值。

<div class="game-play-rank" data-rank"1"></div>
<div class="game-play-rank" data-rank"2"></div>
<div class="game-play-rank" data-rank"3"></div>
etc...

在我的js中我有一个表示人员得分的变量。我只想显示最接近（但高于）人员得分的数据等级值。

e.g。

<div class="game-play-rank" data-rank"4"></div>
<div class="game-play-rank" data-rank"7"></div>
<div class="game-play-rank" data-rank"10"></div>

<script>
var score = 4;
</script>

我打算做

之类的事情

$current = null;
$(".game-play-rank").each(function() {
    if(this.data("rank") > score && this.data("rank") < current.data("rank"))
        $current = this;
});

但我认为每个循环都在制作＆＃34;这个＆＃34; HTML和我无法在其上执行JQuery .data（）函数。我该怎么做呢？

Answer 1

使用$(this).data("rank")代替this.data("rank")

Answer 2

要使jquery对象使用$(this)而不是this

Answer 3

您可以使用与DOM选择器相同的方式从dom节点创建jQuery对象：

$('div').each(function(){
    var jQueryObject = $(this);
})

如果您只想支持更新的浏览器，您还可以使用DOM节点的数据集属性：

var rank = this.dataset.rank;

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Answer 4

你必须使用jQuery选择器调用它，如果不是它不是jQuery对象，这就是为什么不能调用数据属性

试试这个：

var current = null;
$(".game-play-rank").each(function() {
if($(this).data("rank") > score && $(this).data("rank") < current.data("rank"))
    current = $(this).data('rank');
});

Answer 5

$ .each将一个函数作为参数，它可以有两个参数，索引和每个参数的值。

我的意思是：

$current = null;
$(".game-play-rank").each(function(i, val) {
    if($(val).data("rank") > score && $(val).data("rank") < current.data("rank"))
        $current = this;
});

可以比使用＆＃34;这个＆＃34;

更好地工作

选择并显示特定数据值JQuery

5 个答案: