Траверс DOM вверх и вниз

Question

Траверс DOM вверх и вниз

0

У меня есть группа переключателей в div, у которой есть div div, который содержит различные текстовые поля, 4 уровня вниз. Если установлен флажок "false", мне нужно проверить все текстовые поля для этой группы, и если какое-либо текстовое поле имеет значение, выведите предупреждение.

В настоящий момент он выдает два предупреждения для любой "ложной" кнопки, независимо от значений в текстовых окнах. Я не уверен, почему он удваивает предупреждение для любого "ложного" переключателя, но я уверен, что он фактически не читает текстовые поля.

Я предполагаю, что метод find() будет смотреть на несколько уровней детей.

EDIT - я должен также упомянуть, что есть 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");
            }
        }
    });
});

BattlFrog 25 апр. 2014, в 23:46

Источник

0

Не могли бы вы пройтись по DOM в вашем вопросе и отредактировать его так, чтобы отступ не был таким уж плохим?
Lee Taylor 25 апр. 2014, в 21:06
0

Ваша разметка и ваш код не связаны между собой. Какой из них не так?
Jay Blanchard 25 апр. 2014, в 21:11
0

Извините за это, я хотел изменить имена по сравнению с тем, как они есть в коде, так что, возможно, было бы легче следовать, и я забыл внести изменения в код.
BattlFrog 28 апр. 2014, в 20:55
0

Помог ли вам ответ, который я дал?
Jay Blanchard 01 май 2014, в 12:43
1

@Jay - я смог добраться туда, куда собирался, используя твой пример. Спасибо!
BattlFrog 01 май 2014, в 14:58

Показать ещё 3 комментария

Теги:

jquery

dom

dom-traversal

1 ответ

Ещё вопросы

Не могли бы вы пройтись по DOM в вашем вопросе и отредактировать его так, чтобы отступ не был таким уж плохим?
Ваша разметка и ваш код не связаны между собой. Какой из них не так?
Извините за это, я хотел изменить имена по сравнению с тем, как они есть в коде, так что, возможно, было бы легче следовать, и я забыл внести изменения в код.
Помог ли вам ответ, который я дал?
@Jay - я смог добраться туда, куда собирался, используя твой пример. Спасибо!

Jay Blanchard · Accepted Answer · 2014-04-25T19-45-00.000Z

Некоторые из проблем, связанных с перемещением, могут иметь отношение к тому факту, что в ваших значениях радио HTML есть ведущее место, например "true". Это пространство необходимо удалить.

Я принял другой подход (потому что часть вашей разметки, которую вы указали в коде 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);
            }
        });
    }
});