jQuery.css('display')只返回内联

时间:2013-08-12 07:21:39

标签: javascript jquery css

我正在尝试从设置为inline的表中获取选中的选项。有一个搜索功能,可以在与搜索不匹配的对象上设置$(element).css('display','none')。无论如何,这段代码只会返回inline,无论元素设置为什么。即使我手动将所有这些设置为表中的display: none,警报也会为表中的每个对象返回inline。这有什么解决方案吗?

JS代码:

function pass_QR() {
    var i = 0;
    var array = [];
    $("input:checkbox:checked").each(function () {
        i++;
        alert($(this).css('display'));
        if ($(this).val() !== 0 && $(this).css('display') === 'inline') {
            array.push($(this).val());
        }
    });
}

2 个答案:

答案 0 :(得分:2)

从根本上说,css("display")确实有效,所以还有其他事情发生。

我怀疑两件事之一:

  1. 您正在制作display: none的复选框永远不会checked,因此您在each循环中看不到它们。

  2. 制作复选框display: none,而是对其中的某些祖先元素执行此操作。在这种情况下,$(this).is(":visible")就是你要找的东西。

  3. 以下是#2的示例:Live Copy | Live Source

    <div id="ancestor">
    <input type="checkbox" checked>
    </div>
    <script>
    $("#ancestor").css("display", "none");
    console.log("display property is now: " +
        $("input:checkbox:checked").css("display"));
    console.log("visible tells us what's going on: " +
        $("input:checkbox:checked").is(":visible"));
    </script>
    

    ......输出:

    display property is now: inline-block
    visible tells us what's going on: false

    将其应用于您的代码:

    function pass_QR() {
        var i = 0;
        var array = [];
        $("input:checkbox:checked").each(function () {
            i++;
            alert($(this).css('display'));
            if ($(this).val() !== 0 && $(this).is(':visible')) {
            // Change is here -----------------^^^^^^^^^^^^^^
                array.push($(this).val());
            }
        });
    }
    

    旁注:每次调用$()时,jQuery都需要做一些工作。当你发现自己在同一范围内反复调用它时,最好做一次

    的工作:

    function pass_QR() {
        var i = 0;
        var array = [];
        $("input:checkbox:checked").each(function () {
            var $this = $(this); // <=== Once
            i++;
            alert($this.css('display'));
            if ($this.val() !== 0 && $this.is(':visible')) {
            // Other change is here -------^^^^^^^^^^^^^^
                array.push($this.val());
            }
        });
    }
    

答案 1 :(得分:0)

尝试以下:

$("input:checkbox:checked").each(function(i,o){       
      console.log($(this).css("display"));       
});

在这里工作小提琴:http://jsfiddle.net/BcfvR/2/