Jquery - 向元素添加数据并通过添加的数据获取元素
Jquery - add data with to element and get element by added data
我可以通过 jquery 添加的数据获取元素吗?例如
function first() {
var modal_body = $('.modal-body');
modal_body.data('id',4)
}
function second() {
var modal_body = $('.modalbody[data-id=4]');
}
我已经尝试过这个例子,但它不起作用,因为该元素没有数据 ID。 Jquery 在内部保存数据并创建一个名为 $.cache
.
的空对象
有没有办法获取到添加了Jquery的数据的元素?
很遗憾,没有。
正如您所说,数据属性是由 jQuery 在内部添加的。实现你想要的唯一方法是直接设置属性:
function first() {
var modal_body = $('.modal-body');
modal_body.attr('data-id',4)
}
function second() {
var modal_body = $('.modal-body[data-id=4]'); // note: fixed .modalbody to .modal-body
}
这使得它也可以作为 .data('id')
使用。
另一种选择是使用 .filter()
:
function first() {
var modal_body = $('.modal-body');
modal_body.data('id',4)
}
function second() {
var modal_body = $('.modal-body').filter(function () {
return $(this).data('id') === 4;
});
}
下面的演示。
(() => {
var modal_body = $('div.modal-body');
modal_body.attr('data-id', 4)
console.log('found using attr:', $('.modal-body[data-id=4]').length);
})();
(() => {
var modal_body = $('span.modal-body');
modal_body.data('id', 4)
console.log('found using filter:', $('span.modal-body').filter(function() {
return $(this).data('id') === 4;
}).length);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">modal-body</div>
<span class="modal-body">modal-body</span>
不使用单个选择器,但肯定使用 .filter()
:
$("#x").data("data", "a");
$("#y").data("data", 4);
var x2 = $("div").filter(function() {
return $(this).data("data") != null;
});
var y4 = $("div").filter(function() {
return $(this).data("data") === 4;
});
console.log("Divs:", $("div").length, "With ID:", x2.length, "With id==4:", y4.length);
x2.addClass("box");
y4.addClass("box4");
div { border: 1px solid #CCC; }
.box { border: 1px solid green; }
.box4 { border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='x'>x</div>
<div id='y'>y</div>
<div id='z'>y</div>
更新:检查显式数据值,而不仅仅是任何
我可以通过 jquery 添加的数据获取元素吗?例如
function first() {
var modal_body = $('.modal-body');
modal_body.data('id',4)
}
function second() {
var modal_body = $('.modalbody[data-id=4]');
}
我已经尝试过这个例子,但它不起作用,因为该元素没有数据 ID。 Jquery 在内部保存数据并创建一个名为 $.cache
.
有没有办法获取到添加了Jquery的数据的元素?
很遗憾,没有。
正如您所说,数据属性是由 jQuery 在内部添加的。实现你想要的唯一方法是直接设置属性:
function first() {
var modal_body = $('.modal-body');
modal_body.attr('data-id',4)
}
function second() {
var modal_body = $('.modal-body[data-id=4]'); // note: fixed .modalbody to .modal-body
}
这使得它也可以作为 .data('id')
使用。
另一种选择是使用 .filter()
:
function first() {
var modal_body = $('.modal-body');
modal_body.data('id',4)
}
function second() {
var modal_body = $('.modal-body').filter(function () {
return $(this).data('id') === 4;
});
}
下面的演示。
(() => {
var modal_body = $('div.modal-body');
modal_body.attr('data-id', 4)
console.log('found using attr:', $('.modal-body[data-id=4]').length);
})();
(() => {
var modal_body = $('span.modal-body');
modal_body.data('id', 4)
console.log('found using filter:', $('span.modal-body').filter(function() {
return $(this).data('id') === 4;
}).length);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">modal-body</div>
<span class="modal-body">modal-body</span>
不使用单个选择器,但肯定使用 .filter()
:
$("#x").data("data", "a");
$("#y").data("data", 4);
var x2 = $("div").filter(function() {
return $(this).data("data") != null;
});
var y4 = $("div").filter(function() {
return $(this).data("data") === 4;
});
console.log("Divs:", $("div").length, "With ID:", x2.length, "With id==4:", y4.length);
x2.addClass("box");
y4.addClass("box4");
div { border: 1px solid #CCC; }
.box { border: 1px solid green; }
.box4 { border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='x'>x</div>
<div id='y'>y</div>
<div id='z'>y</div>
更新:检查显式数据值,而不仅仅是任何