扩展jQuery的问题（​​添加调试功能）

Question

我有以下jQuery扩展方法代码，它使用attrString()提供元素的所有属性作为可读字符串：

e.g。

$('div').attrString() returns "data-hello=Hello!, class=MyClass,"

当前代码如下所示：

// Return a debug string of all the attributes of an element (first if multiple elements)
jQuery.fn.attrString = function () {
    var result = "";
    if (this[0]) {
        $.each(this[0].attributes, function (i, attrib) {
            var name = attrib.name;
            var value = attrib.value;
            result += name + "=" + value + ", ";
        });
    }
    return result;
};

并且测试是：

// Valid selection - multiple matches, multiple attributes
$('#output').append("<br/>$('div').attrString() = " + $('div').attrString());

// Valid selection - single attributes
$('#output').append("<br/>$('#output').attrString() = " + $('#output').attrString());

// Empty selection
$('#output').append("<br/>$().attrString() = " + $().attrString());

JSFiddle：http://jsfiddle.net/8T38S/2/

问题：

• if (this[0])是否是测试空 jQuery选择的正确方法？
• 是否有更有效的方法将属性名称和值连接在一起
• 这样做的最简单的方法是什么而不留下像这样的尾随逗号 目前呢？
• 是否有更好的方法（例如DOM中的属性）？

Answer 1

你正确地做到了。 if (this[0])是测试jquery选择是否为空的众多方法之一，因为如果它是空的，this[0]将是未定义的，在布尔上下文中计算结果为false。为了连接属性名称和值，jquery提供了map函数。像这样使用它：

// Returns an array: ["attr=value", "attr2=value2", etc.]
$.map(this[0].attributes, function (attrib, i) {
    var name = attrib.name;
    var value = attrib.value;
    return (name + "=" + value);
});

然后，您可以使用join方法将它们连接成一个字符串。这将消除末尾的尾随逗号。至于你的上一个问题，是和否。如果您将其用于调试目的，则应使用console.log或console.dir。这将打印某个对象的所有属性。但是，如果您想要实际显示它，那么您应该使用上面提供的地图功能。

http://jsfiddle.net/prankol57/k9kLD/

整个功能在这里：

// Return a debug string of all the attributes of an element (first if multiple elements)
jQuery.fn.attrString = function () {
    var result = "";
    if (this[0]) {
        result = $.map(this[0].attributes, function (attrib, i) {
            var name = attrib.name;
            var value = attrib.value;
            return (name + "=" + value);
        }).join(", ");
    }
    return result;
};

其余代码没有改变。