CODEWITHSUNDEEP
javascripthtmljquery
Developer
Developer

Reputation: 8646

JQuery loop through dynamic elements and get data-value

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) {
    
  });
});

Upvotes: 2

Views: 373

Answers (2)

angel.bonev
angel.bonev

Reputation: 2242

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.

Upvotes: 1

Anurag Srivastava
Anurag Srivastava

Reputation: 14423

Use the hreffrom 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>

Upvotes: 2

Related Questions