Why is my JQuery .css() method not working? 1

[1DMF]

  var obj = $('li.hide');           
        for(var i=0; i<obj.length; i++){
            if(obj[i].css('display') == 'block' || obj[i].css('display') == ''){
                obj[i].css('display','none');
            }
            else{
                obj[i].css('display','block');                            
            } 
         }

I get 20 elements in the obj object, as expected, but when I try to loop and use the .css() method it errors saying "object doesn't support this property or method"?

I am using : jquery-1.4.2.min.js

Thanks,
1DMF.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta

 

[feherke]

Hi

You are making a little confusion there.
[ul]
[li]obj is a jQuery object which has css() method.[/li]
[li]obj's items are DOM nodes which have no css() methods.[/li]
[/ul]
The quick and dirty solution would be to get a jQuery object again for each DOM node :

[b]var[/b] obj [teal]=[/teal] $[teal]([/teal][green][i]'li.hide'[/i][/green][teal]);[/teal]
[b]for[/b][teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal];[/teal] i[teal]<[/teal]obj[teal].[/teal]length[teal];[/teal] i[teal]++)[/teal][teal]{[/teal]
  [highlight][b]var[/b] obji [teal]=[/teal] $[teal]([/teal]obj[teal][[/teal]i[teal]])[/teal][/highlight]
  [b]if[/b][teal]([/teal][highlight]obji[/highlight][teal].[/teal][COLOR=darkgoldenrod]css[/color][teal]([/teal][green][i]'display'[/i][/green][teal])[/teal] [teal]==[/teal] [green][i]'block'[/i][/green] [teal]||[/teal] [highlight]obji[/highlight][teal].[/teal][COLOR=darkgoldenrod]css[/color][teal]([/teal][green][i]'display'[/i][/green][teal])[/teal] [teal]==[/teal] [green][i]''[/i][/green][teal])[/teal][teal]{[/teal]
    [highlight]obji[/highlight][teal].[/teal][COLOR=darkgoldenrod]css[/color][teal]([/teal][green][i]'display'[/i][/green][teal],[/teal][green][i]'none'[/i][/green][teal]);[/teal]
  [teal]}[/teal]
  [b]else[/b][teal]{[/teal]
    [highlight]obji[/highlight][teal].[/teal][COLOR=darkgoldenrod]css[/color][teal]([/teal][green][i]'display'[/i][/green][teal],[/teal][green][i]'block'[/i][/green][teal]);[/teal]
  [teal]}[/teal]
[teal]}[/teal]

But better rework it without explicit loop.

Note that [tt]li[/tt] elements' default [tt]display[/tt] type is [tt]list-item[/tt], not [tt]block[/tt].


Feherke.

 

[1DMF]

so each element in the JQuery object is not the dom tag element?

I thought it was?

How can the object have an id or an attr() if it doesn't have a css , 'style' is an attribute of a tag, nes pas?

hmm, getting my head round this JQuery at first seemed quite logical but looks clearly are decieiving!

Are you suggesting I use the 'each' method?

Do I then have to write that awful 'function()' code to then process the elements using 'this' ?

I'll have a go and see how I get on.

Thanks,

Feherke

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta

 

[1DMF]

couldn't work it out, looked at the each command on JQuery, and it shows it's use accessing the style attribute not .css?

<script> 
    $(document.body).click(function () { 
      $("div").each(function (i) { 
        if (this.style.color != "blue") { 
          this.style.color = "blue"; 
        } else { 
          this.style.color = ""; 
        } 
      }); 
    }); 
</script>

Might as well have looped em myself!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta

 

[feherke]

Hi

As far as I can tell, you are just changing the [tt]display[/tt] property of all [tt]li[/tt] elements with hide class. For that the following would be enough :

$[teal]([/teal][green][i]'li.hide'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]toggle[/color][teal]()[/teal]

Feherke.

 

[1DMF]

Note that li elements' default display type is list-item, not block.

Thanks , but i have found that the default display value for any element who's CSS is controlled by a CSS file and not a style attribute to be ''.

That's what I was hoping to get round with .css(), I more than likely wrongly assumed , it resolved the issue of the applied CSS through a CSS file and Javascript not seing these values.

but as i seem to have to access the style attribute manually like you usually would and not the .css() method that i hoped solved this probelm, JQuery hasn't really done anything of use for me.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta

 

[feherke]

Hi

Sorry, I can not follow you.
[ul]
[li]The DOM [tt]style[/tt] property contains what was previously set through it.[/li]
[li]The jQuery [tt]css()[/tt] method returns the computed style.[/li]
[/ul]
These two facts have nothing related to my previous note about the default [tt]li[/tt] [tt]display[/tt]. [tt]li[/tt] elements are [tt]list-item[/tt]s, not [tt]block[/tt]s.


Feherke.

 

[1DMF]

there is no style attribute on my elements, so the defualt value is not list-item it's blank. i was hoping that the .css() method actually got me the CSS, well you'd think, it's not a method called style()! - But i guess it doesn't actually get you css it gets you a JSON object of the style attribute, which is not the same thing!

Sorry if I didn't explain this very well.

Anyway, i found a better way of doing this which makes me happy to use JQuery....

function showHide(){            
    if(hide){
         $('li.hide').fadeIn('slow');
            hide = false;
    }
    else{
        $('li.hide').fadeOut('slow');
        hide = true;
    }                    
}

Just got to play with the easing parameter argument now!

Thanks a lot Feherke in helping me understand the JQuery object a little better.

Have a great weekend!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta

 

[feherke]

Hi

there is no style attribute on my elements, so the defualt value is not list-item it's blank.

http://jsfiddle.net/q64zV/

Feherke.

 

[1DMF]

sorry can you explain the link please.

In my first working code if I did

alert(this.style.display);

I get blank, I do not get 'list-item', what are you trying to show me and why do I get blank if you don't?

P.S. missed the toggle post (moved star - isn't this fun!).

I never realised there was a simple method for a hide/show feature, though I still prefer the fade effect



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta

 

[feherke]

Hi

I get blank, I do not get 'list-item', what are you trying to show me and why do I get blank if you don't?

The difference between [tt]style.display[/tt] ( the one are you talking about ) and [tt]css('display')[/tt] ( the one you used in your code ). As mentioned, the [tt]css()[/tt] method returns computed style, that is why it never returned empty string in my example.

P.S. missed the toggle post [gray](...)[/gray] I still prefer the fade effect

$[teal]([/teal][green][i]'li.hide'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]toggle[/color][teal]([/teal][green][i]'slow'[/i][/green][teal])[/teal]

Feherke.

 

[1DMF]

Ah sorry, I must have confused you, I tried the .css() method, but couldn't get it to work, then as I don't like the idea of re-getting the elelemts by Id as you loop, I then used the style.display as per the JQuery website example so was not using the css() method.

'''''''''''''''''''''''''''

$('li.hide').toggle('slow')

So you can use toggle with a fade effect - just tried it.

that's absolutely awesome feherke!

I'm well pleased i came to talk to you!

Now my code is simply

<script type="text/javascript">                
    function showHide(cls){            
        $('li.'+cls).toggle('slow');                   
    }
</script>

so i can toggle any li/class i desire on the page!

I so wish you could get more then one star from me!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta