Перебор атрибутов элемента с помощью jQuery - PullRequest
Новая
       45

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

46 голосов
/ 09 февраля 2010

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

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

1012 *, например * 

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

Ответы [ 8 ]

103 голосов
/ 09 февраля 2010

Лучший способ - использовать объект узла напрямую, используя его свойство 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 :-)
  });
});
10 голосов
/ 09 февраля 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?

4 голосов
/ 09 февраля 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 проверьте этот пост .

1 голос
/ 05 июля 2016 
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); 
    }); 
}
1 голос
/ 10 сентября 2012

Я публикую здесь, потому что я думаю, что это может помочь другим, которые пришли к этой публикации, желая разобрать файл 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());
    });
});

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

С уважением

1 голос
/ 09 февраля 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
    }
  })
});
1 голос
/ 09 февраля 2010

Как насчет? 

$(xml).find('item').each(function() {
  var attributes = $(this)[0].attributes;
  for (attribute in attributes) {
    // Do something with each attribute...
  }
});
0 голосов
/ 25 января 2019

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}`)
}));
...