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();
});

Answer 2

DEMO

您可以按如下方式简化代码。即使你确实需要一个可以稍后调用的函数，代码仍然会更简单。

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

从@terrywb回答我刚刚修改了一些代码并且有效。

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

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

3 个答案: