Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    175
    Thanks
    14
    Thanked 1 Time in 1 Post

    JQuery: Selector problem with dl dt dd

    Hi,

    I am trying to show/hide dt>dd elements together, based on the dt having a class. I can't seem to identify a dd as a child of the dt.

    Code:
    <html>
    <head>
    <style type="text/css">
    body{font: 15px/25px Arial;}
    dt.consumer{color:#fff;}
    dt.consumer dd{color:#000;background:#eee;}
    </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>  
      <script>
      $(document).ready(function(){
        $("dt.consumer").css("background-color","gray");
        $("dt.consumer".dd).css("border", "3px double red");
      });
      </script>
      <style>
       </style>
    </head>
    <body><dl>
    <dt class="consumer">Now is the time for all good men!</dt>
    <dd>The party must wait!</dd>
    <dt class="consum">Now is the time to eat!</dt>
    <dd>Eating is great!</dd>
    <dt class="drink">Now is the time to drink!</dt>
    <dd>Who is kidding whom?</dd>
    </dl>
    </body>
    </html>
    How can I cause a given dd element to respond when the corresponding dt element is affected?

    Andy
    Last edited by 1andyw; 06-09-2009 at 07:17 PM. Reason: RESOLVED

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Try

    Code:
    $("dt.consumer, dt.consumer > dd").css(...);

  • #3
    Regular Coder
    Join Date
    Jul 2006
    Posts
    175
    Thanks
    14
    Thanked 1 Time in 1 Post
    Same result as original post.

  • #4
    Regular Coder
    Join Date
    Jul 2006
    Posts
    175
    Thanks
    14
    Thanked 1 Time in 1 Post
    Resolved.

    Changed this:
    Code:
    $("dt.consumer > dd").css(". . .");
    to this:
    Code:
    $("'dt.consumer' + dd").css(". . .");

  • #5
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Ah, yes, of course... I assumed the dd tags were children of the dt tags (I must admit I didn't look at your html very carefully and jumped to this conclusion, in spite of the fact that I know dd tags do not belong as children to dt tags).

    Nice solution.


  •  

    Posting Permissions

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