遍历和遍历DOM

时间:2014-04-25 21:04:01

标签: jquery dom dom-traversal

我在div中有一个单选按钮组,它有一个兄弟div,包含各种文本框,4个级别。如果选中单选按钮'false',我需要检查该组的所有文本框,如果任何文本框有值,则弹出警报。

现在,无论文本框中的值如何,它都会为任何“假”单选按钮弹出两个警报。我不确定为什么它会将任何“假”单选按钮的警报加倍,但我很确定它实际上并没有读取文本框。

我假设find()方法会调查多个级别的孩子。

编辑 - 我还应该提到有5个问题,所以整个'问题'课程重复5次,当点击提交按钮时,它需要检查每个问题。

这是标记:

<div class="question">
    <div class="radio-buttons">
        <input type="radio" name="radios" value =" true" />Yes
        <input type="radio" name="radios" value =" false" />No
    </div>
    <div class="label">List out the date, name & category....</div>
    <div class="answer-container">
        <fieldset class="answer-container-sub">
           <div class="answer-group">
               <div class="question-label">Name</div>
               <div class="question-answer">
                   <input type="text" />
               </div>
               <div class="question-label">Name</div>
               <div class="question-answer">
                   <input type="text" />
               </div>
           </div>
           <div class="answer-group">
               <div class="question-label">Name</div>
               <div class="question-answer">
                   <input type="text" />
               </div>
               <div class="question-label">Name</div>
               <div class="question-answer">
                   <input type="text" />
               </div>
           </div>
       </fieldset>
   </div>
</div>
<input type="submit" id="button" value="Click Me" />

jQuery ##编辑以更改以下代码中的类名,以便它与上面的html匹配。 ##

$("#button").on("click", function () {
    $('input:radio').each(function () {
        if ($(this).closest('.radio-buttons').find('input:checked').val() == "False") {
            if ($(this).siblings('.answer-container').find('input[type=text]').val() != '') {
               alert("You clicked no but a textbox has a value");
            }
        }
    });
});

1 个答案:

答案 0 :(得分:1)

一些遍历问题可能与您的HTML广播值中存在领先空间这样的事实有关,例如&#34;真&#34 ;.需要删除该空间。

我采用了不同的方法(因为你在jQuery代码中引用的一些标记在本文中缺失)并创建了这个http://jsfiddle.net/jayblanchard/dGqwZ/,这表明遍历DOM应该是多么容易。

$('input[name="radios"]').change(function() {
    var currentValue =  $(this).val(); // spaces need to be removed from radio values in HTML
    if('false' == currentValue) {
        var answers = $(this).closest('.question').find('.answer-container .question-answer');
        $(answers).find('input').each(function() {
            var answerValue = $(this).val();
            if('' != answerValue) {
                alert(answerValue);
            }
        });
    }
});