jquery如何元素的值循环显示出来

Question

有3个div
如何用jquery把第二个div中p后面的值用alert()逐个显示出来，
即循环显示出 1111 2222 3333
<div>
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
</div>

<div>
<p>1111</p>
<p>2222</p>
<p>3333</p>
</div>

<div>
<p>555</p>
<p>666</p>
<p>77777</p>
</div>
我想获取最后一个div中的值
$('div:last p').each(function () {
alert($(this).text());
});
用这种方法在火狐，谷歌中可以，但在ie中却不行

Answer 1

首先选择需要循环显示的元素，然后用jquery的遍历函数（如each()和map()）将其显示出来即可：

$(selector).each(function(index,element));   // 为每个匹配元素规定运行的函数
$(selector).map(function(index,domElement)); // 对当前集合中的每个元素调用的函数对象

实例演示：点击按钮获取第二个div下所有p标签的值

创建Html元素

<div class="box">
<span>点击按钮获取第二个div下所有p标签的值：</span><br>
<div class="content">
  <p>aaaa</p>
  <p>bbbb</p>
  <p>cccc</p>
</div>  
<div class="content">
  <p>1111</p>
  <p>2222</p>
  <p>3333</p>
</div>  
<div class="content">
  <p>555</p>
  <p>666</p>
  <p>77777</p>
</div>
<input type="button" value="获取第二个div下所有p标签的值">
</div>

设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box>span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

编写jquery代码

$(function(){ 
$("input:button").click(function() {
text = $("div.content").eq(1).find("p").map(function(index,elem) {
return $(elem).text();
}).get().join(',');
alert("第二个div下p标签依次为："+text);
});
});

观察效果

Answer 2

$(function () {
  $('div:eq(1) p').each(function () {
    alert($(this).html());
  });
});

追问

我想获取最后一个div中的值
$('div:last p').each(function () {
alert($(this).text());
});
用这种方法在火狐，谷歌中可以，但在ie中却不行

追答

我测试是可以的，ie没问题。我用最新的jquery

本回答被提问者采纳