JQuery L oop через элементы Dynami c и получить значение данных

Question

я пытаюсь что-то выполнить sh мое требование со складной панелью

$(".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 в массиве. Я пытался что-то, но не мог сделать sh

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

Answer 1

Используйте href из a вместе с $.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

Вот еще один подход без использования идентификатора

$(".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 find - получает отфильтрованных потомков каждого элемента в текущем наборе соответствующих элементов, отфильтрованных селектором, jQuery объектом или элементом.

jQuery map - Передайте каждый элемент в текущем сопоставленном наборе через функцию, создав новый объект jQuery, содержащий возвращаемые значения.