我有下面的动态生成的html DIV.因为我需要得到每个标签和它各自的li
项。使用这个标签值我需要调用一个函数。但是不能得到每个值,我重复得到相同的值。有人帮我解决。
HTML:
<div class="row extra-attri-div">
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="environment">environment</label>
<div class="value">
<ul id="li-environment">
<li>Suburban</li>
<li>Urban</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="income_coarse">income_coarse</label>
<div class="value">
<ul id="li-income_coarse">
<li>Middle Class</li>
<li>Upper Middle Class</li>
<li>Very High Income</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="age_coarse">age_coarse</label>
<div class="value">
<ul id="li-age_coarse">
<li>Child</li>
<li>Middle Aged</li>
<li>Older</li>
<li>Younger</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="family_stage">family_stage</label>
<div class="value">
<ul id="li-family_stage">
<li>Family Mix</li>
<li>Family Unknown</li>
<li>W/ Kids</li>
<li>W/O Kids</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="home_scale">home_scale</label>
<div class="value">
<ul id="li-home_scale">
<li>Low Scale</li>
<li>Medium Scale</li>
<li>Upscale</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="education_imputed">education_imputed</label>
<div class="value">
<ul id="li-education_imputed">
<li>Attended Vocational/Tech</li>
<li>Completed College</li>
<li>Completed Graduate School</li>
<li>Completed High School</li>
</ul>
</div>
</div>
</div>
</div>
jQuery:
$('.extra-attri-div').find('.appendeddiv').each(function(i){
console.log("coming"+i);
console.log($(".extraattrlebl").data('extraatt'));
});
因为每次调用console.log($(“。extraattrlebl”)。data('extraatt'));
jQuery在整个文档中(而不仅仅是在.appendeddiv
)查找第一个extraattrlebl
并返回data-extraatt>>的值; 环境
您需要使用.find()
在每个.appendeddiv
中获取
请尝试以下代码:
null
$('.extra-attri-div').find('.appendeddiv').each(function(i){
console.log("coming"+i);
console.log($(this).find(".extraattrlebl").data('extraatt'));
// select the list
let lis = $(this).find("ul li")
// print each li
lis.each(function() {
console.log($(this).text())
});
console.log("\n\n")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row extra-attri-div">
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="environment">environment</label>
<div class="value">
<ul id="li-environment">
<li>Suburban</li>
<li>Urban</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="income_coarse">income_coarse</label>
<div class="value">
<ul id="li-income_coarse">
<li>Middle Class</li>
<li>Upper Middle Class</li>
<li>Very High Income</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="age_coarse">age_coarse</label>
<div class="value">
<ul id="li-age_coarse">
<li>Child</li>
<li>Middle Aged</li>
<li>Older</li>
<li>Younger</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="family_stage">family_stage</label>
<div class="value">
<ul id="li-family_stage">
<li>Family Mix</li>
<li>Family Unknown</li>
<li>W/ Kids</li>
<li>W/O Kids</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="home_scale">home_scale</label>
<div class="value">
<ul id="li-home_scale">
<li>Low Scale</li>
<li>Medium Scale</li>
<li>Upscale</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="education_imputed">education_imputed</label>
<div class="value">
<ul id="li-education_imputed">
<li>Attended Vocational/Tech</li>
<li>Completed College</li>
<li>Completed Graduate School</li>
<li>Completed High School</li>
</ul>
</div>
</div>
</div>
</div>