blocks|key|168702|text|使用LoDash，您可以简单地执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168703|_.transform(this.attributes,+function+(result,+item)+{
++item.specified+&&+(result[item.name]+=+item.value);
},+{});|code-block|syntax|javascript|168704|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>with LoDash you could simply do this:</p>

<pre><code>_.transform(this.attributes, function (result, item) {
  item.specified &amp;&amp; (result[item.name] = item.value);
}, {});
</code></pre>


blocks|key|168729|text|使用javascript函数可以更容易地获取NamedArrayFormat中一个元素的所有属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168730|​|168731|$("#myTestDiv").click(function(){
++var+attrs+=+document.getElementById("myTestDiv").attributes;
++$.each(attrs,function(i,elem){
++++$("#attrs").html(++++$("#attrs").html()%2B"<br><b>"%2Belem.name%2B"</b>:<i>"%2Belem.value%2B"</i>");
++});
});|code-block|syntax|javascript|168732|<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>|168733|168734|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Using javascript function it is easier to get all the attributes of an element in NamedArrayFormat. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#myTestDiv").click(function(){
  var attrs = document.getElementById("myTestDiv").attributes;
  $.each(attrs,function(i,elem){
    $("#attrs").html(    $("#attrs").html()+"&lt;br&gt;&lt;b&gt;"+elem.name+"&lt;/b&gt;:&lt;i&gt;"+elem.value+"&lt;/i&gt;");
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="myTestDiv" ekind="div" etype="text" name="stack"&gt;
click This
&lt;/div&gt;
&lt;div id="attrs"&gt;Attributes are &lt;div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|386854|text|一个调试脚本(基于hashchange上面的答案的jquery解决方案)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|386855|function+getAttributes+(+$node+)+{
++++++$.each(+$node[0].attributes,+function+(+index,+attribute+)+{
++++++console.log(attribute.name%2B':'%2Battribute.value);
+++}+);
}

getAttributes($(this));++//+find+out+what+attributes+are+available|code-block|syntax|javascript|386856|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A debugging script   (jquery solution based on the answer above by hashchange)</p>

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

getAttributes($(this));  // find out what attributes are available
</code></pre>


blocks|key|168813|text|我的建议是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168814|$.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;
}|code-block|syntax|javascript|168815|var+=+$(el).attrs()；|168816|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>My suggestion:</p>

<pre><code>$.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;
}
</code></pre>

<p>var a = $(el).attrs();</p>


blocks|key|386934|text|这是给你的一句话。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|386935|JQuery用户：|386936|用您的jQuery对象替换$jQueryObject。即$('div')。|offset|length|style|CODE|386937|Object.values($jQueryObject.get(0).attributes).map(attr+=>+console.log(`${attr.name+%2B+'+:+'+%2B+attr.value}`));|code-block|syntax|javascript|386938|普通Javascript用户：|386939|用您的HTML+DOM选择器替换$domElement。即document.getElementById('demo')。|386940|Object.values($domElement.attributes).map(attr+=>+console.log(`${attr.name+%2B+'+:+'+%2B+attr.value}`));|386941|干杯！！|386942|entityMap^0|0|0|D|D|S|8|0|0|0|G|B|T|V|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@$F|11|G|12|H|I]|$F|13|G|14|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@$F|18|G|19|H|I]|$F|1A|G|1B|H|I]]|9|@]|A|$]]|$1|S|3|T|5|L|7|1C|8|@]|9|@]|A|$M|N]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|X|$]]

<p>Here is a one-liner for you.</p>
<h2>JQuery Users:</h2>
<p>Replace <code>$jQueryObject</code> with your jQuery object. i.e <code>$('div')</code>.</p>
<pre><code>Object.values($jQueryObject.get(0).attributes).map(attr =&gt; console.log(`${attr.name + ' : ' + attr.value}`));
</code></pre>
<h2>Vanilla Javascript Users:</h2>
<p>Replace <code>$domElement</code> with your HTML DOM selector. i.e <code>document.getElementById('demo')</code>.</p>
<pre><code>Object.values($domElement.attributes).map(attr =&gt; console.log(`${attr.name + ' : ' + attr.value}`));
</code></pre>
<p>Cheers!!</p>


<p>I am trying to go through an element and get all the attributes of that element to output them, for example an  tag may have 3 or more attributes, unknown to me and I need to get the names and values of these attributes. I was thinking something along the lines of:</p>

<pre class="lang-js prettyprint-override"><code>$(this).attr().each(function(index, element) {
    var name = $(this).name;
    var value = $(this).value;
    //Do something with name and value...
});
</code></pre>

<p>Could anyone tell me if this is even possible, and if so what the correct syntax would be?</p>


Get all attributes of an element using jQuery

jQuery

我试图遍历一个元素，并获取该元素的所有属性以输出它们，例如，一个标签可能有3个或更多属性，我不知道，我需要获取这些属性的名称和值。我在想一些类似的事情：$(this).attr().each(function(index, element) {    var name = $(this).name;    var va...

问使用jQuery获取元素的所有属性
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery获取元素的所有属性EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery获取元素的所有属性
EN