Nhận tất cả các thuộc tính của một phần tử bằng jQuery

Tôi đang cố gắng đi qua một phần tử và lấy tất cả các thuộc tính của phần tử đó để xuất chúng, ví dụ một thẻ có thể có 3 thuộc tính trở lên, tôi không biết và tôi cần lấy tên và giá trị của các thuộc tính này. Tôi đã suy nghĩ điều gì đó dọc theo dòng:

$(this).attr().each(function(index, element) {
    var name = $(this).name;
    var value = $(this).value;
    //Do something with name and value...
});

Bất cứ ai có thể cho tôi biết nếu điều này thậm chí có thể, và nếu vậy cú pháp chính xác sẽ là gì?

Tài attributessản chứa tất cả:

$(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);
    }
  });
});

Những gì bạn cũng có thể làm là mở rộng .attrđể bạn có thể gọi nó như thế nào .attr()để có được một đối tượng đơn giản của tất cả các thuộc tính:

(function(old) {
  $.fn.attr = function() {
    if(arguments.length === 0) {
      if(this.length === 0) {
        return null;
      }

      var obj = {};
      $.each(this[0].attributes, function() {
        if(this.specified) {
          obj[this.name] = this.value;
        }
      });
      return obj;
    }

    return old.apply(this, arguments);
  };
})($.fn.attr);

Sử dụng:

var $div = $("<div data-a='1' id='b'>");
$div.attr();  // { "data-a": "1", "id": "b" }

Dưới đây là tổng quan về nhiều cách có thể được thực hiện, để tham khảo cho riêng tôi cũng như của bạn :) Các hàm trả về một hàm băm của tên thuộc tính và giá trị của chúng.

Vanilla JS :

function getAttributes ( node ) {
    var i,
        attributeNodes = node.attributes,
        length = attributeNodes.length,
        attrs = {};

    for ( i = 0; i < length; i++ ) attrs[attributeNodes[i].name] = attributeNodes[i].value;
    return attrs;
}

Vanilla JS với Array.reduce

Hoạt động cho các trình duyệt hỗ trợ ES 5.1 (2011). Yêu cầu IE9 +, không hoạt động trong IE8.

function getAttributes ( node ) {
    var attributeNodeArray = Array.prototype.slice.call( node.attributes );

    return attributeNodeArray.reduce( function ( attrs, attribute ) {
        attrs[attribute.name] = attribute.value;
        return attrs;
    }, {} );
}

jQuery

Hàm này mong đợi một đối tượng jQuery, không phải là một phần tử DOM.

function getAttributes ( $node ) {
    var attrs = {};
    $.each( $node[0].attributes, function ( index, attribute ) {
        attrs[attribute.name] = attribute.value;
    } );

    return attrs;
}

Gạch dưới

Cũng hoạt động cho lodash.

function getAttributes ( node ) {
    return _.reduce( node.attributes, function ( attrs, attribute ) {
        attrs[attribute.name] = attribute.value;
        return attrs;
    }, {} );
}

nhà nghỉ

Thậm chí ngắn gọn hơn phiên bản Underscore, nhưng chỉ hoạt động cho lodash, không phải cho Underscore. Yêu cầu IE9 +, là lỗi trong IE8. Kudos gửi @AlJey cho cái đó .

function getAttributes ( node ) {
    return _.transform( node.attributes, function ( attrs, attribute ) {
        attrs[attribute.name] = attribute.value;
    }, {} );
}

Trang thử nghiệm

Tại JS Bin, có một trang thử nghiệm trực tiếp bao gồm tất cả các chức năng này. Kiểm tra bao gồm các thuộc tính boolean ( hidden) và thuộc tính liệt kê ( contenteditable="").

Một kịch bản sửa lỗi (giải pháp jquery dựa trên câu trả lời ở trên bằng hashchange)

function getAttributes ( $node ) {
      $.each( $node[0].attributes, function ( index, attribute ) {
      console.log(attribute.name+':'+attribute.value);
   } );
}

getAttributes($(this));  // find out what attributes are available

với LoDash bạn chỉ cần làm điều này:

_.transform(this.attributes, function (result, item) {
  item.specified && (result[item.name] = item.value);
}, {});

Sử dụng chức năng javascript sẽ dễ dàng hơn để có được tất cả các thuộc tính của một thành phần trong NamedArrayFormat.

$("#myTestDiv").click(function(){
  var attrs = document.getElementById("myTestDiv").attributes;
  $.each(attrs,function(i,elem){
    $("#attrs").html(    $("#attrs").html()+"<br><b>"+elem.name+"</b>:<i>"+elem.value+"</i>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="myTestDiv" ekind="div" etype="text" name="stack">
click This
</div>
<div id="attrs">Attributes are <div>

Giải pháp đơn giản của Underscore.js

Ví dụ: Nhận tất cả các liên kết văn bản mà cha mẹ có lớp someClass

_.pluck($('.someClass').find('a'), 'text');

Làm việc

Đề xuất của tôi:

$.fn.attrs = function (fnc) {
    var obj = {};
    $.each(this[0].attributes, function() {
        if(this.name == 'value') return; // Avoid someone (optional)
        if(this.specified) obj[this.name] = this.value;
    });
    return obj;
}

var a = $ (el) .attrs ();