JQUERY如何遍历多个相同DIV
本文介绍了JQUERY如何遍历多个相同DIV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<div class="list">
<div class="box">
<div class="header">头部1</div>
<div class="content">内容1</div>
</div>
</div>
<div class="list">
<div class="box">
<div class="header">头部2</div>
<div class="content">内容2</div>
</div>
</div>
<div class="list">
<div class="box">
<div class="header">头部3</div>
<div class="content">内容3</div>
</div>
</div>
代码如上,点击content
如何知道点击的是第几个以及点击的content
内容是什么?谢谢!~
解决方案
HTML:
<div class="list">
<div class="box">
<div class="header">头部1</div>
<div class="content">内容1</div>
</div>
</div>
<div class="list">
<div class="box">
<div class="header">头部2</div>
<div class="content">内容2</div>
</div>
</div>
<div class="list">
<div class="box">
<div class="header">头部3</div>
<div class="content">内容3</div>
</div>
</div>
<div id='run'>结果</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
JS:
$(document).on('click', '.content', function(){
var $this = $(this),
index = $this.parents('.list').index(),
cont = $this.text();
$('#run').text('index: ' + index + ' content: ' + cont);
});
这篇关于JQUERY如何遍历多个相同DIV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文