Итерация атрибутов элемента с помощью jQuery

Я знаю, что отдельные атрибуты можно получить с помощью метода attr(), но я пытаюсь перебрать все атрибуты элемента. Для контекста я использую 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...
});

Но я хотел бы иметь возможность получить массив атрибутов для каждого «элемента», чтобы затем я мог перебирать их ...

e.g.

$(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. Заранее спасибо.


person theraccoonbear    schedule 08.02.2010    source источник
comment
См. stackoverflow.com/questions/1705504/   -  person Roatin Marth    schedule 09.02.2010


Ответы (8)


Лучше всего использовать объект узла напрямую, используя его свойство 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 :-)
  });
});
person prodigitalson    schedule 08.02.2010
comment
@prodigalson: Спасибо за такой подход к индексированному foreach! - person Robin Maben; 26.11.2010

кажется, вам нужно использовать простой старый ванильный 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? < / а>

person Juraj Blahunka    schedule 08.02.2010
comment
И в этом нет ничего плохого. attr () - удобный метод. - person BC.; 09.02.2010

Не могли бы вы получить элемент 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 проверьте это сообщение в блоге.

person womp    schedule 08.02.2010

Как насчет?

$(xml).find('item').each(function() {
  var attributes = $(this)[0].attributes;
  for (attribute in attributes) {
    // Do something with each attribute...
  }
});
person Naeem Sarfraz    schedule 08.02.2010

Хотя вы можете просто использовать стандартный атрибут элемента DOM 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
    }
  })
});
person Doug Neiner    schedule 08.02.2010

Я публикую здесь, потому что думаю, что это может помочь другим, пришедшим на эту публикацию, попытаться проанализировать XML-файл, как и я.

Я искал метод обхода XML-файла с очень похожей структурой на файл theracoonbear и сохранения результатов в массиве, и наткнулся на эту публикацию.

Я посмотрел на код 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());
    });
});

Я понимаю, что это может не совсем ответить на исходный вопрос. Однако я надеюсь, что это может сэкономить время другим посетителям этого поста.

С Уважением

person codepuppy    schedule 10.09.2012

создал эту универсальную функцию, которая позволяет искать атрибуты, а также 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); 
    }); 
}
person shmulik friedman    schedule 05.07.2016

Чистый 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}`)
}));

person Kamil Kiełczewski    schedule 25.01.2019