Итерирование атрибутов элементов с помощью jQuery
Я знаю, что отдельные атрибуты могут быть получены с помощью метода attr()
, но я пытаюсь перебрать атрибуты для элемента all. Для контекста я использую jQuery для некоторых XML...
<items>
<item id="id123" name="Fizz" value="Buzz" type="xyz">
<subitem name="foo">
<subitem name="bar">
</item>
<item id="id456" name="Bizz" value="Bazz" type="abc">
<subitem name="meh">
<subitem name="hem">
</item>
</items>
Я уже могу перебирать элементы с помощью...
$(xml).find('item').each(function() {
// Do something to each item here...
});
Но я бы хотел получить массив атрибутов для каждого элемента, чтобы затем я мог перебирать их...
например.
$(xml).find('item').each(function() {
var attributes = $(this).attributes(); // returns an array of attributes?
for (attribute in attributes) {
// Do something with each attribute...
}
});
Я проделал некоторые поиски здесь, в документации jQuery и в других местах через Google, но не повезло. Если ничего другого, у меня могут быть проблемы с исключением результатов, связанных с методом attr()
объекта jQuery. Спасибо заранее.
Ответы
Ответ 1
Лучший способ - использовать объект node напрямую, используя его свойство attributes
. Единственное различие в моем решении ниже, чем другие, предлагающие этот метод, заключается в том, что я бы использовал .each
снова вместо традиционного цикла js:
$(xml).find('item').each(function() {
$.each(this.attributes, function(i, attrib){
var name = attrib.name;
var value = attrib.value;
// do your magic :-)
});
});
Ответ 2
Кажется, вам нужно использовать простой старый ванильный javascript:
for (var i = 0; i < elem.attributes.length; i++) {
var attrib = elem.attributes[i];
if (attrib.specified == true) {
console.log(attrib.name + " = " + attrib.value);
}
}
Как перебирать все атрибуты в HTML-элементе?
Ответ 3
Не могли бы вы получить элемент DOM из оболочки jQuery с помощью функции get(), а затем перебрать атрибуты DOM?
var node = $(myStuff).get(0);
if (node.attributes.length) {
for (var length = attrs.length, i = 0; i < length; i++) {
if (attrs[i].specified) {
}
}
}
Для более надежной обработки атрибутов DOM отметьте это сообщение в блоге.
Ответ 4
Как насчет?
$(xml).find('item').each(function() {
var attributes = $(this)[0].attributes;
for (attribute in attributes) {
// Do something with each attribute...
}
});
Ответ 5
Пока вы можете просто использовать стандартный атрибут DOM Element attributes
, он будет включать в себя каждый атрибут (даже те, которые явно не заданы) в IE6. В качестве альтернативы вы можете ограничить количество установленных вами атрибутов:
var use_attributes = ['id','name','value','type'];
$(xml).find('item').each(function() {
var $item = $(this);
$.each( use_attributes, function(){
if($item.attr( this )){
// Act on the attribute here.
// `this` = attribute name
// $item.attr( this ) = attribute value
}
})
});
Ответ 6
Я размещаю здесь, потому что я думаю, что это может помочь другим, которые приходят на эту публикацию, пытаясь разобрать XML файл, как я.
Я искал метод перемещения файла xml с очень похожей структурой в theracoonbear fle и хранения результатов в массиве и наткнулся на эту публикацию.
Я смотрел код prodigitalson, но я просто не мог заставить этот синтаксис работать - с firefox, жалующимся на то, что в строке:
$.each(this.attributes, function(i, attrib){
что
this.attributes
не является определенной функцией. Я уверен, что ошибка полностью моя. Но я потратил несколько часов, пытаясь заставить это работать и потерпел неудачу.
Что для меня работало (где мое имя тега - это сеанс вместо элемента): -
$(xml_Data).find("session").each(function() {
console.log("found session");
$(this).children().each(function(){
console.log("found child " + this.tagName);
console.log("attributes" + $(this).text());
});
});
Я понимаю, что это не может точно ответить на исходный вопрос. Однако я надеюсь, что это может спасти других посетителей на этот пост некоторое время.
Привет
Ответ 7
создал эту универсальную функцию, которая позволяет искать атрибуты, а также innearHtml:
function findByAll(toLookFor, lookInText) {
return $('*').filter(function() {
return Array.prototype.some.call(this.attributes, function(attr) {
return attr.value.indexOf(toLookFor) >= 0;
}) || (lookInText && $(this).text().indexOf(toLookFor) >= 0);
});
}
Ответ 8
Pure JS Во- первых, ваш входной XML не является действительным, но вы можете это исправить тесными подпозиция тегов по /
let items = (new DOMParser()).parseFromString(xml,"text/xml").querySelectorAll('item');
items .forEach( (item,i)=> Object.values(item.attributes).forEach(a => {
// your code
console.log('Item ${i}. attr ${a.name} = ${a.value}')
}));
let xml='<items>
<item id="id123" name="Fizz" value="Buzz" type="xyz">
<subitem name="foo" />
<subitem name="bar" />
</item>
<item id="id456" name="Bizz" value="Bazz" type="abc">
<subitem name="meh" />
<subitem name="hem" />
</item>
</items>';
let items = (new DOMParser()).parseFromString(xml,"text/xml").querySelectorAll('item');
items .forEach( (item,i)=> Object.values(item.attributes).forEach(a => {
// your code
console.log('Item ${i}. attr ${a.name} = ${a.value}')
}));