jQuery - 遍历列表元素以获取嵌套的元素和属性

Question

我已经发布了以下生成的html，我需要从中选择特定的元素。 例如，我需要访问并获取所有情况下的href值以及img元素的src和alt属性。

<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的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); 
});