JQuery 循環遍歷動態元素並獲取數據值

Question

我正在嘗試使用可折疊面板來完成我的要求

 $(".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> &nbsp;Cricket (2 items) </a> </h4> </div> <div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;"> <div class="sportlist" data-value="1"> &nbsp;&nbsp; Sachin </div> <div class="sportlist" data-value="2"> &nbsp;&nbsp; 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> &nbsp;Other (2 items) </a> </h4> </div> <div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;"> <div class="sportlist" data-value="3"> &nbsp;&nbsp; Bob </div> <div class="sportlist" data-value="4"> &nbsp;&nbsp; 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) { }); });

Answer 1

使用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> &nbsp;Cricket (2 items) </a> </h4> </div> <div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;"> <div class="sportlist" data-value="1"> &nbsp;&nbsp; Sachin </div> <div class="sportlist" data-value="2"> &nbsp;&nbsp; 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> &nbsp;Other (2 items) </a> </h4> </div> <div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;"> <div class="sportlist" data-value="3"> &nbsp;&nbsp; Bob </div> <div class="sportlist" data-value="4"> &nbsp;&nbsp; Willson </div> </div> </div> </div> </div> </div>

Answer 2

這是另一種不使用 id 的方法

 $(".sport").click(function () { let ids = $.map($(this).closest(".panel-heading").next(".panel-collapse").find(".sportlist"), function (element) { return $(element).data("value") }); console.log(ids) });

 <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> &nbsp;Cricket (2 items) </a> </h4> </div> <div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;"> <div class="sportlist" data-value="1"> &nbsp;&nbsp; Sachin </div> <div class="sportlist" data-value="2"> &nbsp;&nbsp; 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> &nbsp;Other (2 items) </a> </h4> </div> <div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;"> <div class="sportlist" data-value="3"> &nbsp;&nbsp; Bob </div> <div class="sportlist" data-value="4"> &nbsp;&nbsp; Willson </div> </div> </div> </div> </div> </div>

jQuery 關閉- 對於集合中的每個元素，通過測試元素本身並遍歷其在 DOM 樹中的祖先來獲取與選擇器匹配的第一個元素。

jQuery next - 獲取匹配元素集中每個元素的緊隨其后的兄弟。 如果提供了選擇器，則僅當它與該選擇器匹配時，它才會檢索下一個兄弟。

jQuery 查找- 獲取當前匹配元素集中每個元素的后代，由選擇器過濾，jQuery object 或元素。

jQuery map - Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.