Question

我远非JavaScript专家，但我正在尝试将一些mootools代码迁移到jQuery，但我正在努力！

我有一个Web表单，其中包含几个表，其中css类为“.table-row”。单击一个按钮后，我想找到所有包含'.table-row'的行，如果它们的display属性设置为none，我想在提交之前将它们从页面中删除。

这是我的mootools代码：

function remove_hidden_elements() {
    var myElements = $$('.table-row');
    myElements.each(function (item, index) {
        var vis = item.getStyle('display');
        if (vis == 'none') {
            item.dispose();
        }
    });
}

请问有人能指出我在jQuery中实现这个目标的正确方向吗？

非常感谢提前。

Answer 1

jQuery和MooTools并不是那么遥远; jQuery更面向集合，MooTools更加面向元素，但除此之外......

文字jQuery等价物是：

function remove_hidden_elements() {
    var myElements = $('.table-row');
    myElements.each(function() {
        if (this.style.display === 'none') {
            $(this).remove();
        }
    });
}

基本上，为$()（又名$$()）交换jQuery()并使用jQuery将传递到其each版本的原始DOM元素来检查{{1}属性，然后使用remove（如果它们通过jQuery连接/关联，它们也会查找并销毁任何事件处理程序或其他相关数据）。

有点像惯用的jQuery可能是：

style.display

甚至消除变量：

function remove_hidden_elements() {
    var myElements = $('.table-row');
    myElements.each(function() {
        var $this = $(this);
        if ($this.is(":not(:visible)")) {
            $this.remove();
        }
    });
}

jQuery的:visible选择器处理除文字function remove_hidden_elements() { $('.table-row').each(function() { var $this = $(this); if ($this.is(":not(:visible)")) { $this.remove(); } }); }以外的几种情况，:not将其反转。（或更直接，使用:hidden作为3nigma points out - 我一定很累。）但如果你特别想要处理style.display == 'none'的这种情况（和这没有什么不妥，它可以更有效率），使用上面的第一个例子（有或没有style.display == 'none'变量）。

Answer 2

您可以使用:hidden选择器

$(".table-row:hidden").remove();

Answer 3

使用：not和：可见选择器来过滤行。

试试这个：

function remove_hidden_elements() {
  $('.table-row:not(:visible)').remove();
}

注意：

根据jQuery文档

Elements can be considered hidden for several reasons: •They have a CSS display value of none. •They are form elements with type="hidden". •Their width and height are explicitly set to 0. •An ancestor element is hidden, so the element is not shown on the page.

如果您正在严格寻找disaply：none过滤器，请尝试：

function remove_hidden_elements() { $('.table-row').filter(function(){ return (this.style.display === "none"); }).remove(); }

使用css类查找和删除特定元素

3 个答案: