Проход через дерево DOM

Question

Проход через дерево DOM

0

<html>
<head>
<script>
function A(){

  var count=0;
   var A=0;
   var C=0;

   $('.JRow').each(function(){
     count++;

     alert(count);


      $this.$('.BtnSet').each(function(){
        A++;
        alert(A);

      $this.$('.Child').each(function(){
        C++;
        alert(C);

       if(('$(this) input:text[name="A[]"]').length){

       alert('$(this) input:text[name="A[]"]').length);
       }

         });

         });
});

    return false;
}
</script>
</head>
<body>
<form onsubmit="return A()">
    <div class="row JRow">
     <input type="text" name="B[]"></input>
     <input type="text" name="B[]"></input>
        <div class="BtnSet">
            <div class="Child">

            </div>

            <div class="Child">
                <input type="text" name="A[]"></input>
                <input type="text" name="A[]"></input>
                <input type="text" name="A[]"></input>
            </div>

        </div>
    </div>
<div class="JRow"></div>
    <input type="submit" value="Submit"></input>
</form>
</body>
</html>

Привет, мне нужно пройти через это. Если я начинаю с класса JRow, первый JRow должен искать, имеет ли он класс BtnSet. Если это так, класс BtnSet должен искать, имеет ли он дочерний класс. В моем примере, поскольку в первом наборе Btnset есть 2 дочерних класса, мне нужно пройти каждый из них, чтобы получить окончательный вывод, который, длина его текстовых полей. Точно так же мне нужно идти каждый узел. Когда дело доходит до второго JRow, у него ничего нет. Мой реальный вопрос настолько сложный, и я поставил перед ним простой вопрос. Пожалуйста, если кто-нибудь знает, что это помогает мне, так как я борется с этим в течение многих дней.

Lakmini 21 сен. 2013, в 04:15

Источник

Теги:

jquery

html

2 ответа

Ещё вопросы

Thomas W · Answer 1 · 2013-09-21T00-11-00.000Z

Вы ищете функцию find()? Это найдет совпадающие потомки выбранного элемента (ов).

Вместо $this.$('.BtnSet'), вы, вероятно, захотите:

$(this).find( '.BtnSet')

Попробуйте также использовать промежуточные переменные, чтобы вы могли регистрировать/отлаживать свой код. Удивительно, как люди не утруждают себя пониманием происходящего, а потом удивляются, почему они не могут отлаживать или определять, где их код неправильный.

Принцип: если вы не можете зарегистрировать или проверить промежуточный шаг, и есть более одного шага, участвующих в общем поведении, вы не сможете эффективно отладить сбой в общем поведении.

Вы будете уменьшены до крайне неэффективной пробной ошибки, которая обычно терпит неудачу.

Вместо if(('$(this) input:text[name="A[]"]').length){, попробуйте отладки, например:

var inputsAll = $(this).find( 'input');  // just for learning & debugging
var inputsA = $(this).find( 'input:text[name="A[]"]');
console.log('  found inputs', inputsAll, inputsA);
if (inputsA.length) {

Вы не можете установить $ (this) внутри селектора. Селекторы представляют собой текстовое выражение, вызывающее jQuery для выбора/или обертывания элемента DOM - это вызов функции Javascript. Вы не можете волшебным образом мешать им.

K большое спасибо, сэр. Я действительно очень плохо знаком с JQuery. Все еще работаю, чтобы понять это. Я пойду через то, что вы сказали.

Tushar Gupta · Answer 2 · 2013-09-20T23-09-00.000Z

$this неверно $(this)

изменение

if(('$(this) input:text[name="A[]"]').length){

в

if ($(this).find('input:text[name="A[]"]').length) {

вы код становится

function A() {
    var count = 0;
    var A = 0;
    var C = 0;
    $('.JRow').each(function () {
        count++;
        alert(count);
        $(this).find('.BtnSet').each(function () {
            A++;
            alert(A);
            $(this).find('.Child').each(function () {
                C++;
                alert(C);
                if ($(this).find('input:text[name="A[]"]').length) {

                    alert(('$(this) input:text[name="A[]"]').length);
                }
            });
        });
    });
    return false;
}

если вы просто хотите подсчитать длину, вы можете использовать

$('.JRow').length;

Рекомендации

.length

.найти()

http://learn.jquery.com/javascript-101/this-keyword/

Как работает jQuery как прокомментированный undefined

Обновлено после комментария OP

Использовать .has()

$('.JRow').has('.BtnSet');

$('.JRow > .BtnSet').has('.child');

$('.JRow > .BtnSet >.child').has('input:text[name="A[]"]');

Мне нужно знать, есть ли у класса другой класс в детстве. Самое главное, это должен найти ребенка выбранного класса. Вот почему я использовал $ (это) в каждой части. Я неправильно использовал?
@Lakmini проверить обновленный ответ
$('.JRow').has('.BtnSet'); , "вернет классное значение, то есть true of false" , это не так, он возвращает отфильтрованную коллекцию, он не возвращает логическое значение s.
@ не определено да, это была моя ошибка, я уже обновил ее
@Thushar: K большое спасибо за ваше четкое объяснение. Я пойду через них.