Question

该页面上有多个问题/答案集。每个集合被分组为“问题项”类的div。在每个集合中总有一个名为answers [idx] .SetAnser的输入，并且可能有答案[idx]。答案，其中idx是集合的索引。

需要解决的问题是找到所有问题集div元素，其中SetAnswer是一个值而Answer是另一个值。这是示例html：

<div class="questionItem format">
    <input name="answers[0].SetAnswer" type="hidden" value="0" />

    <select name="answers[0].Answer">
      <option selected="selected" value="0">(0) No</option>
      <option value="1">(1) Yes</option>
      <option value="-">(-) Not assessed</option>
    </select>
</div>

<div class="questionItem format">
    <input name="answers[1].SetAnswer" type="hidden" value="?" />
    <select name="answers[1].Answer">
        <option selected="selected" value="?">(select item)</option>
        <option value="0">(0) No</option>
        <option value="1">(1) Yes</option>
        <option value="-">(-) Not assessed</option>
    </select>
</div>

<div class="questionItem format">
    <input name="answers[2].SetAnswer" type="hidden" value="?" />
    <input name="answers[2].Answer" type="number" value="" />    
</div>

<div class="questionItem format">
    <input name="answers[3].SetAnswer" type="hidden" value="red" />
    <input name="answers[3].Answer" type="number" value="red" />    
</div>

我能想出的最好的，不起作用的是这样的：

var answerColl = $(this).find(":input").filter(function () {
    return /^answers\[\d+\]\.Answer$/.test(this.name); 
    });

// Make sure there is an 'Answer' input, if there isn't, that is because it is 
// not displayed, so assume not unanswered
if (answerColl.length > 0) {
    var answerElement = answerColl.first();
    var answer = answerElement.value;

    // First check to see if the answer is ?
    if (answer == "?")
        return true;

    // Next check to see if the answer is empty, if so, must check the setAnswer.  
    // If the setAnswer is ^, then this is no unanswered, if it is ? it is unanswered.
    if (!Boolean(answer)) {

        var setAnswerElement = $(this).find(":input").filter(function () { return /^answers\[\d+\]\.SetAnswer$/.test(this.name); }).first();
        var setAnswer = setAnswerElement.value;

        if (setAnswer == "?")
            return true;
    }
}

return false;

问题在于：

var answerElement = answerColl.first();
var answer = answerElement.value;

当我在调试器中查看它时，answerElement是一个jQuery对象，但是answer总是为null。在查看answerElement时，默认值是我正在寻找的值，实际的答案，但我无法弄清楚如何在代码中找到它。

有什么建议吗？

Answer 1

我认为你不需要为此编写一个Regex表达式..你可以通过使用$ .each循环轻松解决这个问题。首先选择元素..然后在这些元素上运行$ .each循环以检查您说明的条件。试试这个

$(function() {

    $('#btn1').on('click', function() {
        var correctAnswer = $('.questionItem input');
        var userAnswer = $('.questionItem select option:selected');

        $.each(correctAnswer, function(i) {
            // This will give the Question Div's Whose SetAnswer and Answers are different..
            if ($(this).val() != $(userAnswer[i]).val()) {

                // Will give a List of all Answers that are set
                console.log('Correct Answer for Question ' + i + ' is  : ' + $(this).val());
                // Will give a List of all Answers that the user Answered
                console.log('User Selection for Question ' + i + ' is  : ' + $(userAnswer[i]).val());

                // This will print the Question Div for Which 
                // SetAnswer and Answer is different..
                console.log('SetAnswer is of one value and Answer is of another value for : ' + $(this).parent().attr('id'));
            }
        });
    });

});

查看此FIDDLE以获取有效工作示例..

基于多个子元素查找元素

1 个答案: