JQuery का उपयोग करके एक तत्व के सभी गुण प्राप्त करें

Question

मैं एक तत्व के माध्यम से जाने और उन्हें आउटपुट करने के लिए उस तत्व की सभी विशेषताओं को प्राप्त करने की कोशिश कर रहा हूं, उदाहरण के लिए एक टैग में 3 या अधिक विशेषताएँ हो सकती हैं, जो मेरे लिए अज्ञात हैं और मुझे इन विशेषताओं के नाम और मान प्राप्त करने की आवश्यकता है। मैं कुछ सोच रहा था:

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

क्या कोई मुझे बता सकता है कि क्या यह संभव है, और यदि ऐसा है तो सही वाक्यविन्यास क्या होगा?

Answer 1

attributesसंपत्ति उन सब में शामिल हैं:

$(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कर रहा है ताकि आप इसे .attr()सभी विशेषताओं का एक सादा ऑब्जेक्ट प्राप्त करने के लिए कह सकें :

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

उपयोग:

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

Comments

आप इसे ठीक करना चाहते हैं जब कोई मिलान तत्व नहीं है जैसे$().attr()

— अलेक्जेंडर

attributesही नहीं, उन है कि HTML में विनिर्दिष्ट किया गया संग्रह पुराने IE में सभी संभव विशेषताएँ शामिल हैं। आप प्रत्येक गुण specifiedगुण का उपयोग करके विशेषता सूची को फ़िल्टर करके इसके चारों ओर काम कर सकते हैं।

— टिम डाउन

यह jQuery .attr()विधि के लिए एक बहुत अच्छी और अपेक्षित कार्यक्षमता है । यह अजीब है jQuery इसमें शामिल नहीं है।

— ivkremer

बस यह जानने के लिए थोड़ा उत्सुक हैं कि हम इसे एक सरणी के रूप में क्यों एक्सेस कर रहे हैं this[0].attributes?

— विशाल

attributesहालांकि एक ऐरे नहीं है ... क्रोम में कम से कम यह एक है NamedNodeMap, जो एक वस्तु है।

— शमूएल एडविन वार्ड

Answer 2

यहाँ कई तरीकों का अवलोकन किया जा सकता है, जो मेरे स्वयं के संदर्भ के साथ-साथ आपके लिए भी हैं :) फ़ंक्शन ने विशेषता नामों और उनके मूल्यों का एक हैश लौटाया है।

वेनिला जेएस :

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;
}

Array.reduce के साथ वेनिला जेएस

ES 5.1 (2011) का समर्थन करने वाले ब्राउज़रों के लिए काम करता है। IE8 + की आवश्यकता है, 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

यह फ़ंक्शन एक jQuery ऑब्जेक्ट की अपेक्षा करता है, न कि DOM तत्व की।

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

    return attrs;
}

अंडरस्कोर

दर्ज कराने का भी काम करता है।

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

lodash

अंडरस्कोर संस्करण की तुलना में और भी अधिक संक्षिप्त है, लेकिन केवल लॉकर के लिए काम करता है, अंडरस्कोर के लिए नहीं। IE8 + की आवश्यकता है, IE8 में छोटी गाड़ी है। उस एक के लिए Kudos @AlJey को ।

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

परीक्षण पृष्ठ

जेएस बिन में, इन सभी कार्यों को कवर करने वाला एक लाइव टेस्ट पेज है। परीक्षण में बूलियन विशेषताओं ( hidden) और प्रगणित विशेषताओं ( contenteditable="") शामिल हैं।

Answer 3

एक डिबगिंग स्क्रिप्ट (हैशचेंज द्वारा दिए गए उत्तर पर आधारित jquery समाधान)

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

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

Answer 4

LoDash के साथ आप बस यह कर सकते हैं:

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

Answer 5

जावास्क्रिप्ट फ़ंक्शन का उपयोग करके 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>

Answer 6

Underscore.js द्वारा सरल समाधान

उदाहरण के लिए: सभी लिंक पाठ प्राप्त करें जिनके माता-पिता के पास कक्षा है someClass

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

काम करना

Answer 7

मेरा सुझाव:

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