我有一个jQuery函数，我需要根据我的html中有多少div来运行。这是我需要运行的功能：
$('#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>
答案 0 :(得分：1)
jquery有一个方法，它在Jquery中为每个Element运行一次函数 宾语。
传递的函数中this可以访问单个对象。可以用jquery方法包装以获取jquery对象，即$(this）
$('.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
});
});
答案 1 :(得分：-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
});