Итерирование атрибутов элементов с помощью 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}')
}));