JQuery 循环遍历动态元素并获取数据值

Question

I am trying something to accomplish my requirement with collapsible panel

 $(".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>

What I need is when I click on Cricket I need to store the data-value to an array. I tried something but couldn't accomplish

 $(".sport").on("click", function() { var thisId = $(this).attr("id"); var thisChildren = $(this) + ".sportlist"; $(thisChildren).each(function(index) { }); });

Answer 1

Use the href from a along with $.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

Here is another approach without using 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 closes - For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

jQuery next - Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

jQuery find - Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

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