javascript - 深入了解 jQuery 的 .find()？ (意想不到的结果)

Question

我有一个带有几个选择框的“类别树”。当您为某个项目选择一个类别时，它会加载子类别并将其显示在下一个选择框中。

在表单的 .submit() 上，我让它从 DOM 中删除第一个 .category 。一旦剩下最后一个，它就会将 name 属性赋予最后一个 .category。

当页面上有多个项目表单时，就会出现这种情况。我所做的是使用 jQuery 的 .each() 迭代 .item ，然后从那里使用 jQuery 的 .find() 来查找项目中的类别。

我使用的 While 循环创建了一个无限循环。我在整个脚本执行过程中使用了 console.log() 来输出我的变量，并且我不认为 .find() 返回的是我认为的内容。

html:

<div class="item">
    ....
    <div class="category"></div>
    <div class="category"></div>
    ....
</div>

JavaScript:

$('#transaction-form').submit(function(){
    $('.item').each(function(){
        var index = $(this).index();
        var category = $(this).find('.category');
        while (category.length > 1){
            $($(category)[0]).parent().remove();
        }
        $(category[0]).attr('name', 'form-' + index.toString() + '-category');
    });
});

在 while 语句中调用 category.length 返回 2，这是应该的。我不认为 .find() 的返回值是 jQuery 对象。

Answer 1

尝试

$('#transaction-form').submit(function(){
    var x = $('.item').has('.category');
    x.not(x.last()).remove();
    });
});

引用文献

.has()

.last()

.not()

.remove()