javascript - 无法让 jQuery 将文本插入所有元素

Question

我希望我的 JS 将文本插入到 span 标签中。我的 html 的结构如下。

<h4>Question 1</h4>
<div class="q-header"><span></span></div>
<div class="q-header"><span></span></div>
<div class="q-header"><span></span></div>
<h4>Question 2</h4>
<div class="q-header"><span></span></div>
<div class="q-header"><span></span></div>
<h4>Question 3</h4>
<div class="q-header"><span></span></div>
<div class="q-header"><span></span></div>
<div class="q-header"><span></span></div>
<h4>Question 4</h4>

函数执行此操作的方式是找到第一个 h4 元素并选择该 h4 和下一个 h4 之间的所有元素。然后我使用 each() 函数将文本插入到选定的 span 标记中。使用 while 循环，我对页面上的所有元素重复此操作，直到无法选择更多 h4 元素。

上面的 HTML 应该在浏览器中显示为:

Question 1
Question 1a
Question 1b
Question 1c
Question 2
Question 2a
Question 2b
Question 3
Question 3a
Question 3b
Question 3c
Question 4

目前只显示手动输入的主题，不显示子题。

var alphabet = ['', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

//Function names all questions
function nameQuestions(){
    var cQuestion = 1;
    var currentQuestion = $('h4:nth-child(' + cQuestion + ')');
    var cSubQuestions = 1;
    while (true){
    currentQuestion.nextUntil('h4').each(function(){
        $(this).children('span').text('Question ' + cQuestion + alphabet[cSubQuestions]);
        cSubQuestions+=1;
    });
    cQuestion+=1;
    currentQuestion = $('h4:nth-child(' + cQuestion + ')');
    cSubQuestions = 1;
    if (currentQuestion.length < 1){ break; }
    }
}

fiddle

Answer 1

以下更新将使您更进一步:http://jsfiddle.net/ov4oa3dw/15/您将需要额外的代码来捕获后面没有跟随 h4 的元素。

$(document).ready(function(){
var alphabet = ['', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

//Function names all questions
function nameQuestions(){
    //since you need the index number of each h4, you can save them to an array
    var questions = $("h4");
    for(var cQuestion=0; cQuestion<questions.length; cQuestion++){
        var currentQuestion = questions[cQuestion];
        var cSubQuestions = 1;

        //your while(true) is not needed since each() will iterate over the set
        $(currentQuestion).nextUntil('h4').each(function(){
            $(this).children('span').text('Question ' + cQuestion + alphabet[cSubQuestions]);
            cSubQuestions+=1;
        });
    }
}
nameQuestions();
});