我正在尝试使用可折叠面板来完成我的要求
$(".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) {
});
});
最佳答案
使用 a
中的 href
以及 $.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>
关于javascript - JQuery 循环遍历动态元素并获取数据值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61055635/