jQuery each循环内容重复问题：标题正常但内容始终一致

问题描述 #

遍历accordion中的h3标题时，能正确获取每个标题文本，但对应的内容始终返回第一个内容块的内容，无法匹配当前标题对应的内容。

错误代码 #

function staffProfileTechnology() {
    $('.staff-profile').addClass('staffProfileTechnology');

    var staffTechnologyBioContent = $('.staffProfileTechnology').find('#ctl00_PlaceHolderMain_ctl07__ControlWrapper_RichHtmlField').html();

    $('.staffProfileTechnology .col-sm-9 #accordion h3').each(function(){

        var staffTechnologyAccordionTitle = $(this).text();
        var staffTechnologyAccordionContent = $(this).closest('#accordion').find('.ms-rtestate-field').html();
        
        console.log(staffTechnologyAccordionTitle+':'+staffTechnologyAccordionContent+',');
    });
};

控制台输出 #

Teaching : <p>​For 6 years Jon was the principal lecturer in Control Engineering at the RAF College Cranwell where he taught post graduate engineering officers up to MSc. Within his own company, Muretex, he designed and delivered a module on Avionic Systems for 3rd students on the Aerospace Engineering course at the University of Leicester. As Dean of the school h​e oversees the broadening of the school of technologies portfolio of programmes to include Integrated Masters courses in engineering and Degree Apprenticeships as well as additional computer science related courses.&nbsp;<br></p>

Research : <p>​For 6 years Jon was the principal lecturer in Control Engineering at the RAF College Cranwell where he taught post graduate engineering officers up to MSc. Within his own company, Muretex, he designed and delivered a module on Avionic Systems for 3rd students on the Aerospace Engineering course at the University of Leicester. As Dean of the school h​e oversees the broadening of the school of technologies portfolio of programmes to include Integrated Masters courses in engineering and Degree Apprenticeships as well as additional computer science related courses.&nbsp;<br></p>

对应HTML结构 #

<div id="accordion">
<h3>Teaching</h3>
<div class="ms-rtestate-field"><p>​For 6 years Jon was the principal lecturer in Control Engineering at the RAF College Cranwell where he taught post graduate engineering officers up to MSc. Within his own company, Muretex, he designed and delivered a module on Avionic Systems for 3rd students on the Aerospace Engineering course at the University of Leicester. As Dean of the school h​e oversees the broadening of the school of technologies portfolio of programmes to include Integrated Masters courses in engineering and Degree Apprenticeships as well as additional computer science related courses.</p></div>

<h3>Research</h3>
<div class="ms-rtestate-field"><p>​Jon has had commercial success with his own company Muretex, winning significant, nationally competed, research grant funding; including Innovate UK funding for Robotics and Autonomous Systems. He has international contacts and reach, having proposed and chaired 2 European research action groups over 8 years and been invited to deliver a NATO lecture series on autonomy. His current research interests lie at the intersection of systems engineering practices and the capture of requirements for human-machine teaming in autonomous systems to ensure that levels of autonomy are appropriate to meet overall system needs.</p></div>

问题原因 #

$(this).closest('#accordion').find('.ms-rtestate-field').html() 这段代码的问题在于：closest('#accordion') 会找到整个 accordion 容器，然后 find('.ms-rtestate-field') 会选中容器内所有的内容块，而 .html() 只会返回第一个匹配元素的 HTML 内容，所以每次循环都拿到的是第一个内容块的内容。

解决方案 #

需要针对当前遍历的 h3 元素，找到它紧邻的下一个 .ms-rtestate-field 元素，而不是整个容器里的所有内容块。可以用 next() 方法直接获取当前 h3 后面的兄弟元素：

修正后的代码 #

function staffProfileTechnology() {
    $('.staff-profile').addClass('staffProfileTechnology');

    var staffTechnologyBioContent = $('.staffProfileTechnology').find('#ctl00_PlaceHolderMain_ctl07__ControlWrapper_RichHtmlField').html();

    $('.staffProfileTechnology .col-sm-9 #accordion h3').each(function(){

        var staffTechnologyAccordionTitle = $(this).text();
        // 改为使用next()获取当前h3紧邻的下一个内容块
        var staffTechnologyAccordionContent = $(this).next('.ms-rtestate-field').html();
        
        console.log(staffTechnologyAccordionTitle+':'+staffTechnologyAccordionContent+',');
    });
};

如果担心结构可能有变化（比如h3和内容块之间有其他元素），可以用 nextUntil 结合 next 来确保找到对应的内容块：

var staffTechnologyAccordionContent = $(this).nextUntil('.ms-rtestate-field').next('.ms-rtestate-field').html();

这样就能正确获取每个标题对应的专属内容了。

内容的提问来源于stack exchange，提问作者lee