提问者:小点点

如何在div中获取每个标签和相应的li?


我有下面的动态生成的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'));
        
    });

共1个答案

匿名用户

因为每次调用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>