我有六个部分。在其中，我正在创建一个具有6个跨度圆的新div。我做了一个能做到这一点的功能，并且效果很好。现在，我需要为与其父部分编号相同的圆圈上色。例如：如果我有从顶部开始的第三部分，则我需要给第三个圆圈上色，而其余的则不需要。第四节和第四圈也一样。
这将是我的HTML，只有一个部分...其他相同。
var anchor = $('.anchor-link');
var section = $('.panels');
var count = 0;
if (anchor.length > count) {
section.append('<div class= "circle"></div>');
var circle = $('.circle');
circle.each(function(e){
count++;
circle.append('<span></span>');
})
}
var green = $('.circle > span');
circle.each(function(e){
if ($(this).find('span').length > 0) {
var indexSection = section.index(this);
var indexSpan = green.index(this);
if (indexSection == indexSpan){
green.addClass('greens');
}
}
})<section class="two-split panels">
<div class="container">
<div class="row">
<div class="col col-2 left-col">
<h4 class="heading grey">Our Strategic Model</h4>
<h2 class="section-title green">Creating value...</h2>
<p class="txt grey">UDG Healthcare is an international outsourcing services group focussed on the healthcare industry. The Group is organised and managed in three separate divisions, each focused on providing a specific area of specialist services to healthcare companies.</p>
<img class="pic pic-left" src="./images/left-white.png" alt="Customers">
<div class="row">
<div class="col col-2 col-2-t small">
<h4 class="small-heading grey">How we create value</h4>
<p class="text small-text grey">Our strategy is to capitalise on an increasing trend by pharmaceutical, biotech and medtech companies to outsource non-core and specialist activities on an international basis. To achieve this we provide specialist skills and technical capabilities to clients across local and international markets.</p>
</div>
<div class="col col-2 col-2-t small">
<h4 class="small-heading grey padded">What makes us different</h4>
<p class="text small-text grey padded">We strive to create strong market offerings which can provide customers with a range of specialist capabilities within each of our areas of operation. We work in partnership with the manufacturer to create a bespoke solution to best address their objectives. We operate with a quality and governance framework which reflects the industry standards which allows clients to outsource with confidence.</p>
</div>
</div>
</div>
<div class="col col-2 right-col">
<h2 class="section-title white">...Growing sustainably</h2>
<p class="txt white">The strategy of the Group is to focus on maximising Shareholder value from outsourced commercialisation services, by capitalising on its existing market leading positions as the demand for specialist outsourced services in the healthcare sector increases, driving higher levels of growth and profitability. We aim to drive growth through a combination of organic growth supplemented by strategic acquisitions, which will drive increasing returns on capital employed for the Group.</p>
<img src="./images/right-green.png" alt="People" class="pic pic-right">
<div class="row">
<div class="col col-2 col-2-t small">
<h4 class="small-heading white">People at the core</h4>
<p class="text small-text white">Attracting and retaining talented leaders is essential for UDGHealthcare to sustain its growth model.</p>
</div>
<div class="col col-2 col-2-t small">
<h4 class="small-heading white">Delivering value</h4>
<p class="text small-text white">Successful delivery of our strategy will result in increased shareholder value through share price appreciation and dividends. Disciplined financial management and increased cash generation will allow for on-going re-investment in the business to sustain the growth model and capitalise on the opportunity to grow our services.</p>
</div>
</div>
</div>
</div>
<div class="bottom-btn">
<a href="javascript:;" class="download-link">
<span class="s s-down-arrow btn-link">
<span class="hide">download</span>
</span>Download Strategic Model <span class="no-under">(PDF, 185KB)</span>
</a>
<a href="#" class="going-down anchor-link">
<button type="button" class="down down-desktop">
<img src="./images/down-green.png" alt="Move to the top content">
<span class="s s-down-arrow btn-arrow">
<span class="hide">Move Up</span>
</span>
</button>
</a>
<button type="button" class="down down-tablet">
<img src="./images/down.png" alt="Move to the top content">
<span class="s s-down-arrow btn-arrow">
<span class="hide">Move Up</span>
</span>
</button>
</div>
</div>
</section>
那里有圆圈，但是它们的颜色是个问题...通过这种方式，我给它们全部着色...需要一些帮助。
答案 0 :(得分：1)
由于您的HTML代码有点混乱，因此我将为您提供一个通用的解决方案。让我知道您是否正在寻找这种解决方案？
$(document).ready(function(){
$('section').each(function(idx,ele){
let circles = '';
for(let i = 0; i<6; i++){
circles += '<div class= "circle"></div>';
}
$(ele).append(circles);
$(ele).find('.circle').eq(idx).addClass('green');
});
}).circle{
width:20px;
height:20px;
border-radius:100%;
background-color:#ccc;
margin:5px;
display:inline-block;
}
.green{
background-color:#ccee11 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="two-split panels">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</div>
</section>
<section class="two-split panels">
<div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</div>
</section>
<section class="two-split panels">
<div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div>
</section>
<section class="two-split panels">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</div>
</section>
<section class="two-split panels">
<div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</div>
</section>
<section class="two-split panels">
<div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div>
</section>