Question

我想从click事件的多个属性中获取数据。假设我有一个div为test_class和ID testID的div，如下所示。

<div class="test_class" id="testId"><!-- ... --></div>

我想获取class和id属性的值，并将它们存储在单独的变量中。

var classattr = 'test_class';
var idattr = 'testId';

我该怎么做？我想避免多次调用attr()。

Answer 1

console.log("Div id is "+$('div').attr('id'))
console.log("Div class is "+$('div').attr('class'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_class" id="testId"></div>

使用.attr()

描述：获取匹配元素集中第一个元素的属性值。

Answer 2

USE ：

$(this).each(function() {
  $.each(this.attributes, function() {
    // this.attributes is not a plain object, but an array
    // of attribute nodes, which contain both the name and value
    if(this.specified) {
      console.log(this.name, this.value);
    }
  });
});

您不必多次使用.attr 例如：使用上述代码可以获得具有多个属性的单个 span 标记。

Answer 3

您也可以使用javascript获取这些内容，如下所示。

var attrs = document.getElementById("testId").attributes;
var classattr = attrs["class"].nodeValue;
var idattr = attrs["id"].nodeValue;
console.log(classattr);
console.log(idattr);

<div class="test_class" id="testId">

</div>

Answer 4

你根本不需要jQuery。通过vanilla JavaScript的魔力，您可以访问任何元素的class和id。甚至还有一个更简洁的界面来添加/删除类：classList。您可以在jQuery单击处理程序中使用它们：

$('.test_class').click(function() {
  console.log(this.className, this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_class" id="testId">Click me!</div>

或者没有任何jQuery：

document.querySelector('.test_class').addEventListener('click', function() {
  console.log(this.className, this.id);
});

<div class="test_class" id="testId">Click me!</div>

要访问其他属性，您可以使用其他方法。

data-*属性？使用dataset。
name属性？好吧...... name。
无法直接访问的属性？ getAttribute()让你了解。

Answer 5

您可以执行的操作是按下某个按钮。我们可以说已经点击了班级btn。

<html>

    <a href="#" class="button">Click me</a>
    <div class="test_class" id="testId> Some stuff in here </div>

</html>

<script>

    $("").click(function(){

var dvclass = $(".test_class").attr("class");
var dvid = $(".test_class").attr("id");


});


</script>

Answer 6

对象破坏更简单：

var t = document.getElementById("testId");

var {className, id} = t;

console.log(className, id)

<div class="test_class" id="testId">

如果需要，您可以在粗括号之间添加任何其他属性。

Answer 7

function getDomNodeProps(domNode) {
    let attrs = {}
    Array.from(domNode.attributes).forEach(a => attrs[a.name] = a.value);
    return attrs;
}
console.log(getDomNodeProps(document.getElementById("testId")))

Answer 8

尝试attr()。使用点击功能。然后使用this.attr找到attr值

$('.test_class').click(function() {
  var cls = $(this).attr('class');
  var id = $(this).attr('id');
  console.log(cls, id)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_class" id="testId">click</div>

Answer 9



    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("div").click(function(){
            var clnm=$(this).attr("class");
            var idSel=$(this).attr("id");
        });
    });
    </script>
    </head>
    <body>

    <div class="test_class" id="testId">
    Example
    </div>
    </body>
    </html>




$("div").click(function(){
var classattr=$(this).attr("class");
var idattr=$(this).attr("id");
console.log(classattr,idattr);
});

Answer 10

$(this).each(function() {
  $.each(this.attributes, function() {
    // this.attributes returns array
    if(this.specified) {
      console.log(this.name, this.value);
    }
  });
});

如何从多个属性中获取数据？

10 个答案: