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

Question

I want my JS to insert text into span tags. The structure of my html is below.

<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>

The way the function should do this is by finding the first h4 element and selecting all the elements between that h4 and the next h4. I then use the each() function to insert text into the selected span tags. With a while loop I repeat this for all elements on the page until no more h4 elements can be selected.

The above HTML should appear in the browser as:

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

Currently, only the manually entered main question titles show and the subquestions don't show.

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

The following update will get you further: http://jsfiddle.net/ov4oa3dw/15/ You will need additional code to capture the items that are not followed by an 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();
});

Answer 2

DEMO

You can simplify your code as follows. Even if you do need a function your can call later, the code would still be much simpler.

$(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'];
    $('h4').each(function(i) {
        $(this).nextUntil('h4').each(function(j) {
            $(this).children('span').text('Question ' + (i+1) + alphabet[j+1]);
        });
    });
});

Answer 3

Adopted from @terrywb answer I just modified code a bit and it worked.

$(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(){
        var questions = $("h4");
        for(var cQuestion=0; cQuestion<questions.length; cQuestion++){
            var currentQuestion = questions[cQuestion];
            var cSubQuestions = 1;
            $(currentQuestion).nextUntil('h4').each(function(){
                $(this).children('span').text('Question ' + parseInt( cQuestion+1) + alphabet[cSubQuestions]);
                cSubQuestions+=1;
            });
        }
    }
    nameQuestions();
});

DEMO