如何使用jQuery获得两个类所选元素的属性?

How can I get attributes of elements selected with two classes using jQuery

本文关键字：元素 属性 两个 jQuery 何使用      更新时间：2023-09-26

这似乎应该是简单的，但我有困难。

我需要在我的DOM中选择具有checkbox和selected类应用的元素，所以我使用JavaScript代码:

var queries = $(".checkbox.selected");
for (var i = 0; i < queries.length; i++) {
    console.log(queries[i]);
}

输出:

[<div class=​"checkbox selected">​Option 1​</div>​, 
 <div class=​"checkbox selected">​Option 2​</div>​]

问题是，当我使用queries[i].text()(在循环内)时，我得到:

Uncaught TypeError: queries[i].text is not a function

所以它看起来好像我的queries不是DOM对象的列表。这怎么可能?我已经尝试过这种多种方式，我根本无法访问Option 1或Option 2文本。有人遇到这个错误吗?我是否正确地访问了元素?

通过索引访问时，没有这些元素的jQuery对象，只有普通元素。你必须这样做:

var queries = $(".checkbox.selected");
for (var i = 0; i < queries.length; i++) {
    console.log($(queries[i]).text());
}

但这很难看，使用jquery的own each:

$(".checkbox.selected").each(function(){
    console.log($(this).text());
});

所以它看起来好像我的查询不是DOM对象列表

尝试使用.textContent在queries[i] DOM元素中返回文本

var queries = $(".checkbox.selected");
for (var i = 0; i < queries.length; i++) {
  console.log(queries[i].textContent);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="checkbox selected">Option 1</div>
<div class="checkbox selected">Option 2</div>

你得到一个错误与queries[i].text()的原因是因为你调用一个jQuery方法上的DOM元素;queries是一个jQuery集合，但queries[i]是一个DOM元素。给定一个DOM元素，要访问jQuery方法，您需要对DOM元素进行jQuery包装:

$( queries[i] ).text()
但是，我会一直使用jQuery——jQuery .each()方法: 
var queries = $(".checkbox.selected");
queries.each( function(i,query) {
    console.log( $(query).text() );
});

或:

    $(".checkbox.selected").each( function(i,query) {
        console.log( $(query).text() ); //output: Option 1'nOption 2
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox selected">Option 1</div> 
<div class="checkbox selected">Option 2</div>

相关文章：