如何将元素的值与控制台中的每个组件分开

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。 你应该在 class".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)来引用元素。