jQuery - Перемещение по элементам списка, чтобы получить вложенные элементы и атрибуты

Question

Я опубликовал следующий сгенерированный html, где мне нужно выбрать определенные элементы. Например, мне нужно получить и получить значения href во всех случаях, а также атрибуты src и alt элемента img.

<ul id="query" class="clicked inline"> 
    <li> 
    <a class="filterterm" href="#">×</a> 
    <span class="term">design</span> 
    </li> 
    <li> 
    <a class="filterterm" href="http://www.askgraphics.com/">×</a> 
    <span class="bingresult">Website design, Blog design and Web..</span> 
    </li> 
    <li> 
    <a class="filterterm" href="http://www.askgraphics.com"> 
     <img class="imgresult" width="60px" border="1px" height="60px" src="http://farm8.staticflickr.com/7423/13129389874_a07ced37ee_t.jpg" alt="Image"> 
    </a> 
    <span class="imageterm"></span> 
    </li> 

Я попытался с помощью кода, как в не ниже, но без успеха

('ul#query > li > .term').each(function(i,data){ 
     console.log(" Term Data"+data.text());    
     }); 

    }); 
    $('ul#query > li > img > .imgresult').each(function(i,data){ 
     console.log(" Image Data"+data); 
     }); 

    }); 
    $('ul#query > li > .linkresult').each(function(i,data){ 
     console.log(" Link Data"+data.text());   
     }); 

    }); 
    $('ul#query > li > img > .videoresult').each(function(i,data){ 
     console.log(" Video Data"+data);   

    }); 

Answer 1

Несколько проблем:

1) Много ошибок синтаксиса в вашем JavaScript, и отсутствие закрытия ul тег ваш HTML. В следующий раз подумайте о публикации скрипта вместе с образцом кода и очистите свой код перед публикацией. Это поможет вам устранить проблему и облегчит вам помощь пользователям SO.

2) Метод jQuery's each() передает элемент HTML, а не завершенный набор jQuery, в обработчик функции. Это означает, что такие конструкции, как data.text(), не работают. Вы можете преобразовать в JQuery обернутого набор:

console.log(" Term Data" + $(data).text()); 

или, предпочтительно, использовать innerText или textContent свойства самого элемента:

console.log(" Term Data" + data.textContent); 

3) Ваши селекторы понапрасну специфичные и некорректные загрузки. В общем, используйте наименее специфичные селекторы, необходимые для того, чтобы получить нужные вам данные.

Новый образец кода (также a fiddle)

$('.term').each(function (i, termEl) { 
    console.log(" Term Data: ", termEl.textContent); 
}); 

$('.imgresult').each(function (i, imgEl) { 
    console.log(" Image Data: ", imgEl.src); 
}); 

$('.linkresult').each(function (i, aEl) { 
    console.log(" Link Data: ", aEl.textContent, aEl.href); 
}); 

$('.videoresult').each(function (i, videoEl) { 
    console.log(" Video Data: ", videoEl.href); 
});