Как извлечь имя из кнопки (jQuery навигация)?

Question

Часть исходного кода на указанном c сайте выглядит следующим образом:

                                    .
                                    .
                                    .

                       <div class="list-group-item">
        <strong>item 1</strong>
        description
        <a class="btn btn-default btn-xs pull-right listing-sub-remove"
           data-id="5e98a2dc5e0aye57597b181b">
            Unsubscribe
        </a>
    </div>
                        <div class="list-group-item">
        <strong>item 2</strong>
        description
        <a class="btn btn-default btn-xs pull-right listing-sub-remove"
           data-id="5e58ac128edaey3f2935d94b">
            Unsubscribe
        </a>
    </div>
                                    .
                                    .
                                    .

Как мне получить каждое значение data-id?

Я пытался

      $('.list-group-item').each(function(){
        var text = ($(this).text());
        console.log(text);
      });

Но он возвращает item 1(2), description и Unsubscribe текст.

Я также пытался

      $('.btn btn-default btn-xs pull-right listing-sub-remove').each(function(){
        var text2 = ($(this).text());
        console.log(text2);
      });

Но это не работает вообще. Какую команду я должен использовать, чтобы успешно получить значения идентификатора данных?

Answer 1

Это то, что вы ищете?

// We gather ALL elements with '.list-group-item' class
var elements = $(".list-group-item");
  // We iterate over each element in the array of elements
  $.each(elements, function(index, element) {
  // We create a variable that takes the child link anchor [a tag], and grabs the data-id attribute from it
  var dataId = $(element).find("a")[0].dataset.id;
  // If the variable is not undefined, it will console log the result
  if (dataId) { console.log(dataId); };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item">
  <strong>item 1</strong> description
  <a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e98a2dc5e0aye57597b181b">
            Unsubscribe
        </a>
</div>
<div class="list-group-item">
  <strong>item 2</strong> description
  <a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e58ac128edaey3f2935d94b">
            Unsubscribe
        </a>
</div>
.

Answer 2

Вы можете сделать это так:

$(document).ready(function() {
   $(".btn.btn-default.btn-xs.pull-right.listing-sub-remove").each(function() {
   console.log($(this).data("id"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <div class="list-group-item">
       <strong>item 1</strong>
       description
       <a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e98a2dc5e0aye57597b181b">
         Unsubscribe
       </a>
     </div>
     <div class="list-group-item">
       <strong>item 2</strong>
       description
       <a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e58ac128edaey3f2935d94b">
         Unsubscribe
       </a>
     </div>