SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery $(this) with class name

    Hi all

    I have a jsfiddle here: http://jsfiddle.net/ecWT5/

    It's 3 different colored blocks.

    I want to show the color of the block on the block.

    The blocks all have a class name.

    So If I get the color using the class name it shows the same color on all blocks

    Is it possible to use something like $(this) block with a class name to get the color of this block.

  2. #2
    SitePoint Enthusiast Strider64's Avatar
    Join Date
    Aug 2012
    Posts
    37
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Don't know exactly what you're look for, but maybe something like this? http://jsfiddle.net/Strider64/4zQQu/
    http://www.jrpepp.com is a place to go for web design,
    web development and more!

  3. #3
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,398
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    The way I read the post @Strider64 ; is he wants the colour in text on the block.

    It looks like your code opens a window with the colour code when clicked - the op wants the colour code written on the block without having to click anything?

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I want to display the colour of the block in rgb or hex.

    But thats not really the question here.

    Each block has the same class name.

    If I use the class name in jQuery it gives me the same colour for each block

    Code:
    $(function(){
        var color = $('.my_Box').css('backgroundColor'); 
        $('.my_Box span').html(color);
    })
    Is there a way in jQuery to get the different colour in each block using a class name.

  5. #5
    SitePoint Enthusiast Strider64's Avatar
    Join Date
    Aug 2012
    Posts
    37
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Something like this? http://jsfiddle.net/Strider64/TZ9AL/1/

    Yes there is, by using each (basically a loop statement) on the class and grabbing the css background-color for each class that is name my_Box.
    http://www.jrpepp.com is a place to go for web design,
    web development and more!

  6. #6
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, Thank You

  7. #7
    SitePoint Member
    Join Date
    Aug 2013
    Location
    San Francisco, CA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A simpler version if you're not looking for RGB to Hex conversion: http://jsfiddle.net/ecWT5/4/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •