Проблемы с расширением jQuery (добавление функций отладки)
У меня есть следующий код метода расширения jQuery, который предоставляет все атрибуты элемента как читаемой строки, используя attrString():
например
$('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 где-то)? 
Вы делаете это правильно. 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;
};
Остальная часть кода не изменилась.
