如何遍歷JQuery對象數組並將其應用於每個對象？

我有一個jQuery函數，需要根據我在html中有多少div來運行。這裏是我需要運行功能：如何遍歷JQuery對象數組並將其應用於每個對象？

$('#ChildVerticalTab_1').easyResponsiveTabs({ 
    type: 'vertical', 
    width: 'auto', 
    fit: true, 
    tabidentify: 'ver_1', // The tab groups identifier 
    activetab_bg: '#fff', // background color for active tabs in this group 
    inactive_bg: '#F5F5F5', // background color for inactive tabs in this group 
    active_border_color: '#c1c1c1', // border color for active tabs heads in this group 
    active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border 
});

的問題是，我將有數目不詳的「#ChildVerticalTab_」的div，所以我將需要運行功能＃ChildVerticalTab_1，＃ChildVerticalTab_2，＃ChildVerticalTab_3等。等

我試圖用一個循環：

var serviceCount = $('.hor_1 div[id^="ChildVerticalTab"]').length; 
for(var i = 0; i <= serviceCount; i++) { 
    $('#ChildVerticalTab_'+i).easyResponsiveTabs({ 
     type: 'vertical', 
     width: 'auto', 
     fit: true, 
     tabidentify: 'ver_'+i, // The tab groups identifier 
     activetab_bg: '#fff', // background color for active tabs in this group 
     inactive_bg: '#F5F5F5', // background color for inactive tabs in this group 
     active_border_color: '#c1c1c1', // border color for active tabs heads in this group 
     active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border 
    }); 
}

不幸的是，沒有工作。在這種情況下，有五個ChildVerticalTab div。它看起來像上面運行功能每個單獨的div五次，如果這是有道理的。

這裏是我的html：

<div id="parentHorizontalTab"> 
    <ul class="resp-tabs-list hor_1"> 
     <li>Ophthalmology</li> 
     <li>Hand/Wrist/Elbow</li> 
     <li>Endoscopy/GI</li> 
     <li>General Surgery</li> 
     <li>Foot/Ankle</li> 
    </ul> 
    <div class="resp-tabs-container hor_1"> 
     <div id="ChildVerticalTab_1"> 
     <ul class="resp-tabs-list ver_1"> 
      <li>Service Name 1</li> 
      <li>Service Name 2</li> 
      <li>service Name 3</li> 
     </ul> 
     <div class="resp-tabs-container ver_1"> 
      <div> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu accumsan urna. Fusce varius eu dolor et ullamcorper. Cras lacinia nisl vel magna consequat ornare. Ut molestie pulvinar augue elementum malesuada. Vestibulum ac ipsum tempus, vehicula nibh ut, consequat nulla. Nulla maximus vulputate ante at volutpat. Donec at laoreet ex, ut feugiat velit. Pellentesque in diam ornare, sollicitudin ipsum eget, eleifend lorem. Praesent eget orci eget est fringilla consectetur.</p> 
       <p>Code: 123</p> 
      </div> 
      <div> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu accumsan urna. Fusce varius eu dolor et ullamcorper. Cras lacinia nisl vel magna consequat ornare. Ut molestie pulvinar augue elementum malesuada. Vestibulum ac ipsum tempus, vehicula nibh ut, consequat nulla. Nulla maximus vulputate ante at volutpat. Donec at laoreet ex, ut feugiat velit. Pellentesque in diam ornare, s</p> 
       <p>Code: 124</p> 
      </div> 
      <div> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu accumsan urna. Fusce varius eu dolor et ullamcorper. Cras lacinia nisl vel magna consequat ornare. Ut molestie pulvinar augue elementum malesuada. Vestibulum ac ipsum tempus, vehicula nibh ut, consequat nulla. Nulla maximus vulputate ante at </p> 
       <p>Code: 125</p> 
      </div> 
     </div> 
     </div> 
     <div id="ChildVerticalTab_2"> 
     <ul class="resp-tabs-list ver_2"> 
      <li>Service Name 1</li> 
      <li>Service Name 2</li> 
     </ul> 
     <div class="resp-tabs-container ver_2"> 
      <div> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu accumsan urna. Fusce varius eu dolor et ullamcorper. Cras lacinia nisl vel magna consequat ornare. Ut molestie pulvinar augue elementum malesuada. Vestibulum ac ipsum tempus, vehicula nibh ut, consequat nulla. Nulla iam ornare, sollicitudin ipsum eget, eleifend lorem. Praesent eget orci eget est fringilla consectetur.</p> 
       <p>Code: 126</p> 
      </div> 
      <div> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu accumsan urna. Fusce varius eu dolor et ullamcorper. Cras lacinia nisl vel magna consequat ornare. Ut molestie pulvinar augue elementum malesuada. Vestibulum ac ipsum tempus, vehicula nibh ut, consequat nulla. Nulla maximus vulputate ante at volutpat. Donec at laoreet ex, ut feugiat velit. Pellentesque in diam ornare, sollicitudin ipsum eget, eleifend lorem. Praesent eget orci eget est fringilla consectetur.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu accumsan urna. Fusce varius eu dolor et ullamcorper. Cras lacinia nisl vel magna consequat ornare. Ut molestie pulvinar augue elementum malesuada. Vestibulum ac ipsum tempus, vehicula nibh ut, consequat nulla. Nulla maximus vulputate ante at volutpat. Donec at laoreet ex, ut feugiat velit. Pellentesque in diam ornare, sollicitudin ipsum eget, eleifend lorem. Praesent eget orci eget est fringilla consectetur.</p> 
       <p>Code: 127</p> 
      </div> 
     </div> 
     </div> 
     <div id="ChildVerticalTab_3"> 
     <ul class="resp-tabs-list ver_3"> 
      <li>Service Name 1</li> 
      <li>Service Name 2</li> 
     </ul> 
     <div class="resp-tabs-container ver_3"> 
      <div> 
       <p>Lorem ipsum dolor sit amet, copulvinar augue elementum malesuada. Vestibulum ac ipsum tempus, vehicula nibh ut, consequat nulla. Nulla maximus vulputate ante at volutpat. Donec at laoreet ex, ut feugiat velit. Pellentesque in diam ornare, sollicitudin ipsum eget, eleifend lorem. Praesent eget orci eget est fringilla consectetur.</p> 
       <p>Code: 128</p> 
      </div> 
      <div> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu accumsan urna. Fusce varius eu dolor et ullamcorper. Cras lacinia nisl vel magna consequat ornare. Ut molestie pulvinar fringilla consectetur.</p> 
       <p>Code: 129</p> 
      </div> 
     </div> 
     </div> 
     <div id="ChildVerticalTab_4"> 
     <ul class="resp-tabs-list ver_4"> 
      <li>Service Name 1</li> 
     </ul> 
     <div class="resp-tabs-container ver_4"> 
      <div> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu accumsan urna. Fusce varius eu dolor et ullamcorper. Cras lacinia nisl vel magna consequat ornare. Ut molestie pulvinar augue elementum malesuada. Vestibulum ac ipsum tempus, vehicula nibh ut, consequat nulla. Nulla maximus vulputate ante at volutpat. Donec at laoreet ex, ut sum eget, eleifend lorem. Praesent eget orci eget est fringilla consectetur.</p> 
       <p>Code: 130</p> 
      </div> 
     </div> 
     </div> 
     <div id="ChildVerticalTab_5"> 
     <ul class="resp-tabs-list ver_5"> 
      <li>Service Name 1</li> 
      <li>Service Name 2</li> 
     </ul> 
     <div class="resp-tabs-container ver_5"> 
      <div> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu accumsan urna. Fusce varius eu dolor et ullamcorper. Cras lacinia nisl vel magna consequat ornare. Ut molestie pulvinar augue elementum malesuada. Vestibulum ac ipsum tempus, vehicula nibh ut, consequat nulla. Nulla maximus vulputate ante at vol</p> 
       <p>Code: 131</p> 
      </div> 
      <div> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu accumsan urna. Fusce varius eu dolor et ullamcorper. Cras lacinia nisl vel magna consequat ornare. Ut molestie pulvinar augue elesum eget, eleifend lorem. Praesent eget orci eget est fringilla consectetur.</p> 
       <p>Code: 132</p> 
      </div> 
     </div> 
     </div> 
    </div> 
</div>

來源

2017-08-03 user715564

$（ '.hor_1 div [id^=「ChildVerticalTab」]'）。each（）比for循環好得多。 – epascarello

所以你需要同時選擇它們全部？刪除長度和使用serviceCount.easyReponsivrTabs（...） –

@epascarello性能明智嗎？我會認爲本地JS的'for-loop'會佔上風。沒有？ –

jQuery有一個其每個元件在Jquery的對象一次運行的函數每個方法。

在傳遞函數中可以通過this訪問單個對象。這可以被包裹在一個jQuery方法來獲得jQuery對象即$(this）

https://api.jquery.com/each/

$('.hor_1 div[id^="ChildVerticalTab"]').each(function(index) { 
     $(this).easyResponsiveTabs({ 
      type: 'vertical', 
      width: 'auto', 
      fit: true, 
      tabidentify: 'ver_'+index, // The tab groups identifier // may need to do index-1 depending on your needs 
      activetab_bg: '#fff', // background color for active tabs in this group 
      inactive_bg: '#F5F5F5', // background color for inactive tabs in this group 
      active_border_color: '#c1c1c1', // border color for active tabs heads in this group 
      active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border 
     }); 
    });

來源

2017-08-03 16:49:28

'我'現在不確定 – charlietfl

你是對的我以爲我擺脫了'我'的需要。答案已更新 –

這也不起作用。我認爲這是因爲每個「ChildVerticalTab」div都需要包含該數字。例如，＃ChildVerticalTab_1＃ChildVerticalTab_2＃ChildVerticalTab_3等等 – user715564

-3

怎麼樣對這些div分配標誌類，說.cvt然後

$('.cvt').easyResponsiveTabs({ 
    type: 'vertical', 
    width: 'auto', 
    fit: true, 
    tabidentify: 'ver_1', // The tab groups identifier 
    activetab_bg: '#fff', // background color for active tabs in this group 
    inactive_bg: '#F5F5F5', // background color for inactive tabs in this group 
    active_border_color: '#c1c1c1', // border color for active tabs heads in this group 
    active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border 
});

來源

2017-08-03 16:52:46 Mazolo

並且標籤不應該被硬編碼 – epascarello

這不是實例特定的 – charlietfl

如何遍歷JQuery對象數組並將其應用於每個對象？

回答

相關問題