Как вывести значение элемента отдельно от каждого компонента в консоли

Question

Привет, у меня есть эти элементы на моей странице HTML

<div class="widget-content"><i class="rgCate" data-type="single" data-len="5" data-label="recent"></i></div>
<div class="widget-content"><i class="rgCate" data-type="single" data-len="5" data-label="recent"></i></div>
<div class="widget-content"><i class="rgCate" data-type="single" data-len="5" data-label="recent"></i></div>

, и я хочу получить значение data-type индивидуально, в том смысле, что оно идет со значением каждого элемента отдельно от другого и не вместе.

Я попытался привести значение отдельно таким образом, но у меня не получилось, так как значение собрано вместе

$(".cate-sections .widget").each(function(){
var e=$(this);
var dataTypeAttr = e.find('.rgCate').attr("data-type");
console.log(dataTypeAttr);
});

, поэтому я хочу помочь с этим ..

Answer 1

Ваш HTML, размещенный здесь, кажется неполным, хотя ниже доступен код для HTML здесь. Вы должны l oop для класса ".widget-content"

$( document ).ready(function() {
  $(".widget-content").each(function(){
    var e=$(this);
    var dataTypeAttr = e.find('.rgCate').attr("data-type");
    alert(dataTypeAttr);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="widget-content"><i class="rgCate" data-type="single" data-len="5" data-label="recent"></i></div>
<div class="widget-content"><i class="rgCate" data-type="Double" data-len="5" data-label="recent"></i></div>
<div class="widget-content"><i class="rgCate" data-type="Triple" data-len="5" data-label="recent"></i></div>

Answer 2

Вы должны установить правильный селектор. Так как ваш атрибут data-type находится на элементе i, вы хотите нацелиться на него.

$(".widget-content .rgCate").each(function(i, el) {
  console.log(i, $(el).data("type"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="widget-content"><i class="rgCate" data-type="single" data-len="5" data-label="recent"></i></div>
<div class="widget-content"><i class="rgCate" data-type="single" data-len="5" data-label="recent"></i></div>
<div class="widget-content"><i class="rgCate" data-type="single" data-len="5" data-label="recent"></i></div>

Вы также можете использовать this или $(this) для ссылки на элемент.