1. 首页
  2. 问答
  3. 无法遍历一个div

无法遍历一个div

2016-11-17 176 views
0

我的代码是这样的无法遍历一个div

$(document).ready(function() { 
 

 
    $('.slides').children('.item').each(function() { 
 

 
     var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop 
 

 
     tTimer = $(this).find('.timer'); 
 
     alert(tTimer); 
 
    }); 
 

 
    });
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="content apc banner no-padding" id="pos_1197"> 
 
    <div class="slides slick-initialized slick-slider slick-dotted" role="toolbar"> 
 
    <div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i> 
 
    </div> 
 
    <div aria-live="polite" class="slick-list draggable" style="height: 550px;"> 
 
     <div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;"> 
 
     <div class="item myclass medium c5-bg odd slick-slide slick-current slick-active" style="background-image: url(&quot;/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1600&amp;height=700&amp;rnd=131237861660000000&quot;); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;" 
 
     data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00"> 
 
      <div class="image hidden-lg hidden-md"> 
 
      <img src="/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1140&amp;height=600&amp;rnd=131237861660000000" alt="Banner_Home"> 
 
      </div> 
 
      <div class="table-cell"> 
 
      <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s"> 
 
       <p class="heading main c3-text">WIn a Spectacular gift by donating through us</p> 
 
       <p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a> 
 
       </p> 
 

 
       <h2 class="timer"></h2> 
 
       <input id="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item myclass medium c5-bg even slick-slide" style="background-image: url(&quot;/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1600&amp;height=700&amp;rnd=131237861660000000&quot;); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;" 
 
     data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01"> 
 
     <div class="image hidden-lg hidden-md"> 
 
      <img src="/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1140&amp;height=600&amp;rnd=131237861660000000" alt="Banner_Home2"> 
 
     </div> 
 
     <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s"> 
 
      <p class="heading main c3-text">WIn a Spectacular gift by donating through us</p> 
 
      <p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a> 
 
      </p> 
 

 
      <h2 class="timer"></h2> 
 
      <input id="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</section>
一切的子元素看起来不错给我，但由于某些原因，循环不工作，我没有得到任何的警示信息。任何人都可以让我知道我在这里做错了什么吗？

来源

2016-11-17 Athul

+3

'id'应该是唯一使用类，而不是和用'find（）'，而不是'儿童（）'。 –

回答

1

id应该在您的代码中是唯一的，所以请使用class，否则只有第一个具有id的元素才能访问。虽然您只需要使用find()方法而不是children()，因为它只选择直接子，而.item不是直接子。

$(document).ready(function() { 
 
    $('.slides').find('.item').each(function() { 
 
    var tValue = $(this).find('.campaignValidity').val(); 
 
    tTimer = $(this).find('.timer'); 
 
    alert(tValue); 
 
    }); 
 
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="content apc banner no-padding" id="pos_1197"> 
 
    <div class="slides slick-initialized slick-slider slick-dotted" role="toolbar"> 
 
    <div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i> 
 
    </div> 
 
    <div aria-live="polite" class="slick-list draggable" style="height: 550px;"> 
 
     <div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;"> 
 
     <div class="item myclass medium c5-bg odd slick-slide slick-current slick-active" style="background-image: url(&quot;/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1600&amp;height=700&amp;rnd=131237861660000000&quot;); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;" 
 
     data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00"> 
 
      <div class="image hidden-lg hidden-md"> 
 
      <img src="/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1140&amp;height=600&amp;rnd=131237861660000000" alt="Banner_Home"> 
 
      </div> 
 
      <div class="table-cell"> 
 
      <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s"> 
 
       <p class="heading main c3-text">WIn a Spectacular gift by donating through us</p> 
 
       <p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a> 
 
       </p> 
 

 
       <h2 class="timer"></h2> 
 
       <input class="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item myclass medium c5-bg even slick-slide" style="background-image: url(&quot;/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1600&amp;height=700&amp;rnd=131237861660000000&quot;); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;" 
 
     data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01"> 
 
     <div class="image hidden-lg hidden-md"> 
 
      <img src="/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1140&amp;height=600&amp;rnd=131237861660000000" alt="Banner_Home2"> 
 
     </div> 
 
     <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s"> 
 
      <p class="heading main c3-text">WIn a Spectacular gift by donating through us</p> 
 
      <p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a> 
 
      </p> 
 

 
      <h2 class="timer"></h2> 
 
      <input class="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</section>

来源

2016-11-17 06:21:15

1

您选择不能够选择.item格设置正确。您可以随时通过执行console.log（）来调试这些问题并检查开发控制台。

作为一个解决方案，你可以在.slides上下文中检查.item class div。

$(document).ready(function() { 
 

 
    var context = $('.slides'); 
 

 
    $('.item',context).each(function() { 
 

 
     var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop 
 
     console.log(tValue); 
 
     tTimer = $(this).find('.timer'); 
 
     alert(tTimer); 
 
    }); 
 

 
    });
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="content apc banner no-padding" id="pos_1197"> 
 
    <div class="slides slick-initialized slick-slider slick-dotted" role="toolbar"> 
 
    <div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i> 
 
    </div> 
 
    <div aria-live="polite" class="slick-list draggable" style="height: 550px;"> 
 
     <div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;"> 
 
     <div class="item myclass medium c5-bg odd slick-slide slick-current slick-active" style="background-image: url(&quot;/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1600&amp;height=700&amp;rnd=131237861660000000&quot;); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;" 
 
     data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00"> 
 
      <div class="image hidden-lg hidden-md"> 
 
      <img src="/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1140&amp;height=600&amp;rnd=131237861660000000" alt="Banner_Home"> 
 
      </div> 
 
      <div class="table-cell"> 
 
      <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s"> 
 
       <p class="heading main c3-text">WIn a Spectacular gift by donating through us</p> 
 
       <p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a> 
 
       </p> 
 

 
       <h2 class="timer"></h2> 
 
       <input id="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item myclass medium c5-bg even slick-slide" style="background-image: url(&quot;/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1600&amp;height=700&amp;rnd=131237861660000000&quot;); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;" 
 
     data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01"> 
 
     <div class="image hidden-lg hidden-md"> 
 
      <img src="/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1140&amp;height=600&amp;rnd=131237861660000000" alt="Banner_Home2"> 
 
     </div> 
 
     <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s"> 
 
      <p class="heading main c3-text">WIn a Spectacular gift by donating through us</p> 
 
      <p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a> 
 
      </p> 
 

 
      <h2 class="timer"></h2> 
 
      <input id="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</section>

来源

2016-11-17 06:23:40 Deep

1

试试这个：

$(document).ready(function() { 

    $('.slides').find('.item').each(function() { 

     var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop 
     alert(tValue); 
     tTimer = $(this).find('.timer'); 
     alert(tTimer); 
    }); 

    });

来源

2016-11-17 06:25:43 Sami

相关问题

 相关问题