遍历DOM树

时间:2013-09-21 01:32:21

标签: jquery html

<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个Child类,我需要遍历每个类以获得最终输出,即文本框的长度。同样,我需要去每个节点。说到第二个JRow,它什么都没有。我真正的问题是如此复杂,我通过它提出了一个简单的问题。如果有人知道这有帮助我,因为我很多天都在努力解决这个问题。

2 个答案:

答案 0 :(得分:1)

您在寻找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函数调用。你不能神奇地将它们混合在一起。

答案 1 :(得分:1)

$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

.find()

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

How jQuery Works

评论的

undefined

OP发表评论后更新

使用.has()

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

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

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