Get all Attributes from a HTML element with Javascript/jQuery

后端 未结 17 2012
时光说笑
时光说笑 2020-11-22 05:07

I want to put all attributes in a Html element into an array: like i have a jQuery Object, whichs html looks like this:



        
17条回答
  •  不知归路
    2020-11-22 05:49

    Roland Bouman's answer is the best, simple Vanilla way. I noticed some attempts at jQ plugs, but they just didn't seem "full" enough to me, so I made my own. The only setback so far has been inability to access dynamically added attrs without directly calling elm.attr('dynamicAttr'). However, this will return all natural attributes of a jQuery element object.

    Plugin uses simple jQuery style calling:

    $(elm).getAttrs();
    // OR
    $.getAttrs(elm);
    

    You can also add a second string param for getting just one specific attr. This isn't really needed for one element selection, as jQuery already provides $(elm).attr('name'), however, my version of a plugin allows for multiple returns. So, for instance, a call like

    $.getAttrs('*', 'class');
    

    Will result in an array [] return of objects {}. Each object will look like:

    { class: 'classes names', elm: $(elm), index: i } // index is $(elm).index()
    

    Plugin

    ;;(function($) {
        $.getAttrs || ($.extend({
            getAttrs: function() {
                var a = arguments,
                    d, b;
                if (a.length)
                    for (x in a) switch (typeof a[x]) {
                        case "object":
                            a[x] instanceof jQuery && (b = a[x]);
                            break;
                        case "string":
                            b ? d || (d = a[x]) : b = $(a[x])
                    }
                if (b instanceof jQuery) {
                    var e = [];
                    if (1 == b.length) {
                        for (var f = 0, g = b[0].attributes, h = g.length; f < h; f++) a = g[f], e[a.name] = a.value;
                        b.data("attrList", e);
                        d && "all" != d && (e = b.attr(d))
                    } else d && "all" != d ? b.each(function(a) {
                        a = {
                            elm: $(this),
                            index: $(this).index()
                        };
                        a[d] = $(this).attr(d);
                        e.push(a)
                    }) : b.each(function(a) {
                        $elmRet = [];
                        for (var b = 0, d = this.attributes, f = d.length; b < f; b++) a = d[b], $elmRet[a.name] = a.value;
                        e.push({
                            elm: $(this),
                            index: $(this).index(),
                            attrs: $elmRet
                        });
                        $(this).data("attrList", e)
                    });
                    return e
                }
                return "Error: Cannot find Selector"
            }
        }), $.fn.extend({
            getAttrs: function() {
                var a = [$(this)];
                if (arguments.length)
                    for (x in arguments) a.push(arguments[x]);
                return $.getAttrs.apply($, a)
            }
        }))
    })(jQuery);
    

    Complied

    ;;(function(c){c.getAttrs||(c.extend({getAttrs:function(){var a=arguments,d,b;if(a.length)for(x in a)switch(typeof a[x]){case "object":a[x]instanceof jQuery&&(b=a[x]);break;case "string":b?d||(d=a[x]):b=c(a[x])}if(b instanceof jQuery){if(1==b.length){for(var e=[],f=0,g=b[0].attributes,h=g.length;f

    jsFiddle

    /*  BEGIN PLUGIN  */
    ;;(function($) {
    	$.getAttrs || ($.extend({
    		getAttrs: function() {
    			var a = arguments,
    				c, b;
    			if (a.length)
    				for (x in a) switch (typeof a[x]) {
    					case "object":
    						a[x] instanceof f && (b = a[x]);
    						break;
    					case "string":
    						b ? c || (c = a[x]) : b = $(a[x])
    				}
    			if (b instanceof f) {
    				if (1 == b.length) {
    					for (var d = [], e = 0, g = b[0].attributes, h = g.length; e < h; e++) a = g[e], d[a.name] = a.value;
    					b.data("attrList", d);
    					c && "all" != c && (d = b.attr(c));
    					for (x in d) d.length++
    				} else d = [], c && "all" != c ? b.each(function(a) {
    					a = {
    						elm: $(this),
    						index: $(this).index()
    					};
    					a[c] = $(this).attr(c);
    					d.push(a)
    				}) : b.each(function(a) {
    					$elmRet = [];
    					for (var b = 0, c = this.attributes, e = c.length; b < e; b++) a = c[b], $elmRet[a.name] = a.value;
    					d.push({
    						elm: $(this),
    						index: $(this).index(),
    						attrs: $elmRet
    					});
    					$(this).data("attrList", d);
    					for (x in $elmRet) $elmRet.length++
    				});
    				return d
    			}
    			return "Error: Cannot find Selector"
    		}
    	}), $.fn.extend({
    		getAttrs: function() {
    			var a = [$(this)];
    			if (arguments.length)
    				for (x in arguments) a.push(arguments[x]);
    			return $.getAttrs.apply($, a)
    		}
    	}))
    })(jQuery);
    /*  END PLUGIN  */
    /*--------------------*/
    $('#bob').attr('bob', 'bill');
    console.log($('#bob'))
    console.log(new Array(50).join(' -'));
    console.log($('#bob').getAttrs('id'));
    console.log(new Array(50).join(' -'));
    console.log($.getAttrs('#bob'));
    console.log(new Array(50).join(' -'));
    console.log($.getAttrs('#bob', 'name'));
    console.log(new Array(50).join(' -'));
    console.log($.getAttrs('*', 'class'));
    console.log(new Array(50).join(' -'));
    console.log($.getAttrs('p'));
    console.log(new Array(50).join(' -'));
    console.log($('#bob').getAttrs('all'));
    console.log($('*').getAttrs('all'));
    
    All of below is just for stuff for plugin to test on. See developer console for more details.
    

提交回复
热议问题