javascript - JQuery 循环遍历动态元素并获取数据值
问题描述
我正在尝试使用可折叠面板来完成我的要求
$(".sport").on("click", function() {
var thisId = $(this).attr("id");
var thisChildren = $(this) + ".sportlist";
$(thisChildren).each(function(index) {
});
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div style="height:600px;padding:0px;margin:0px;">
<div class="col-md-3 scroll-container" style="padding:0px;">
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Cricket (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="1">
Sachin
</div>
<div class="sportlist" data-value="2">
Kohli
</div>
</div>
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Other (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="3">
Bob
</div>
<div class="sportlist" data-value="4">
Willson
</div>
</div>
</div>
</div>
</div>
</div>
我需要的是,当我单击 Cricket 时,我需要将其存储data-value
到一个数组中。我尝试了一些东西,但无法完成
$(".sport").on("click", function() {
var thisId = $(this).attr("id");
var thisChildren = $(this) + ".sportlist";
$(thisChildren).each(function(index) {
});
});
解决方案
将href
froma
与 一起使用$.map
:
$(".sport").on("click", function() {
let id = $(this).attr("href")
, list = $.map($(id).find(".sportlist"), function(item){
return $(item).data("value")
})
console.log(list)
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div style="height:600px;padding:0px;margin:0px;">
<div class="col-md-3 scroll-container" style="padding:0px;">
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Cricket (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="1">
Sachin
</div>
<div class="sportlist" data-value="2">
Kohli
</div>
</div>
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Other (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="3">
Bob
</div>
<div class="sportlist" data-value="4">
Willson
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- php - php多维数组按其他数组的列排序
- python - 如何用python绘制可读的、最好是交互式的网络图?
- mysql - 来自网关地址而不是源容器的 Docker MySQL 容器传入连接
- perl - 如何使用 perl 脚本静默安装 exe 文件
- amazon-web-services - Cloudformation:防止更新替换资源后删除
- c# - 在 ASP.NET 的文本框/文本区域中输入数学或化学方程式
- git - 如何从 github 桌面创建发布 github
- react-native - react-native-video 不使用远程 url
- javascript - 使用 Object.defineProperty 作为子对象的键?
- javascript - apollo-client:如何在 gql 模板中插入片段?