CODEWITHSUNDEEP
javascriptjquerycss
Kastenbrot
Kastenbrot

Reputation: 5

jQuery.css('display') only returns inline

I am trying to get checked options from a table which are set inline. There is a search function, which sets $(element).css('display','none') on objects in which there is no match with the search. Anyways, this piece of code will only return inline, no matter what the elements are set to. Even if I manually set all of them to display: none in the table itself, the alert will return inline for every single object in the table. Is there any solution to this?

JS code: 

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());
        }
    });
}

Upvotes: 0

Views: 203

Answers (2)

maverickosama92
maverickosama92

Reputation: 2725

try following:

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

working fiddle here: http://jsfiddle.net/BcfvR/2/

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074595

Fundamentally, css("display") does work, so something else is going on.

I suspect one of two things:

  1. The checkboxes that you're making display: none are never checked, and so you don't see them in your each loop.

  2. You're not making the checkboxes display: none, but instead doing that to some ancestor element of them. In that case, $(this).is(":visible") is what you're looking for.

Here's an example of #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>

...which outputs:

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

Applying that to your code:

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());
        }
    });
}

Side note: Every time you call $(), jQuery has to do some work. When you find yourself calling it repeatedly in the same scope, probably best to do that work once:

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());
        }
    });
}

Upvotes: 2

Related Questions