基於多個子元素的查找元素

頁面上有多個問題/答案集。每個集合被分組爲一個類'questionItem'的div。在每個集合中總是有一個名爲answers [idx] .SetAnser的輸入，可能會有答案[idx] .Answer，其中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對象，但答案始終爲空。在查看answerElement時，默認值是我正在尋找的值，即實際答案，但我無法弄清楚如何在代碼中獲取該值。

有什麼建議嗎？

來源

2012-09-07 Sam Carleton

'value'是普通的JavaScript，你需要使用'VAL（）'用jQuery對象。 – adeneo

@adeneo您應該將其作爲答案發布。 –

我不認爲你需要爲此寫出正則表達式..你可以通過使用$ .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的工作示例..

來源

2012-09-07 20:01:30

基於多個子元素的查找元素

回答

相關問題