Question

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

有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标签的值

1. 创建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>

2. 设置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;}

3. 编写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);
   	});
   });

4. 观察效果

   

Answer 2

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

追问

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

追答

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