我有一些HTML的同一部分重复了几次，我试图在JavaScript的波纹管中的console.log中获取要打印的部分数组。
我看不到哪里出了问题，单击关闭
时出现控制台错误wrapper.getElementsByClassName不是函数
任何人都可以帮助我获取此cosole.log来打印阵列的数量。
JavaScript
_bindShowLess = function () {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
// Not working
// End not working
_showLess.on('click', function () {
var wrapper = document.getElementsByClassName('sectorpage-strengths');
var div = wrapper.getElementsByClassName('container');
var section = [];
for (i = 0; i < div.length; i++) {
section[i] = div[i].getElementsByClassName('sectorpage-strengths-list');
}
console.log(section);
// Removed to stop onscroll to parent div
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
// End
});
};
HTML
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Commercial Services
</h2>
</div>
</div>
<div class="row sectorpage-strengths-list">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Datamonitor Healthcare </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Biomedtracker </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Medtrack </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=350&la=en-US&hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Strategic Transactions </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">
View more
<br>
<em class="informa-icon glyphicon glyphicon-plus-sign"></em>
</span>
<span class="center-block view-all-sectors-btn text-center less" role="button">
View Less
<br>
<em class="informa-icon glyphicon glyphicon-minus-sign"></em>
</span>
</div>
</div>
</section>
答案 0 :(得分：0)
wrapper是您代码中的一个集合。
代替
var wrapper = document.getElementsByClassName('sectorpage-strengths');
尝试
var wrapper = document.getElementById('sectorpage-strengths');
还没有定义您的i变量，所以代替了
for (i = 0; i < div.length; i++) { // ...
尝试
for (var i = 0; i < div.length; i++) { // ...
答案 1 :(得分：0)
使用jquery时，可以使用jquery类选择器。如果要使用document.getElementsByClass，则需要通过传递索引来获取元素。另外，您也想在部分数组中push像这样
section.push(div[i].find('.sectorpage-strengths-list'));
_bindShowLess = function() {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
// Not working
// End not working
_showLess.on('click', function() {
var wrapper = $('#sectorpage-strengths');
var div = wrapper.find('.container');
var section = [];
for (let i = 0; i < div.length; i++) {
section.push(div[i].find('.sectorpage-strengths-list'));
}
console.log(section);
// Removed to stop onscroll to parent div
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
// End
});
};<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Commercial Services
</h2>
</div>
</div>
<div class="row sectorpage-strengths-list">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Datamonitor Healthcare </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Biomedtracker </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Medtrack </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=350&la=en-US&hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Strategic Transactions </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">
View more
<br>
<em class="informa-icon glyphicon glyphicon-plus-sign"></em>
</span>
<span class="center-block view-all-sectors-btn text-center less" role="button">
View Less
<br>
<em class="informa-icon glyphicon glyphicon-minus-sign"></em>
</span>
</div>
</div>
</section>