Resolved JQuery: Selector problem with dl dt dd

1andyw · 06-09-2009, 04:00 PM

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

Fumigator · 06-09-2009, 05:31 PM

Try

Code:

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

1andyw · 06-09-2009, 06:07 PM

Same result as original post.

1andyw · 06-09-2009, 07:16 PM

Resolved.

Changed this:

Code:

$("dt.consumer > dd").css(". . .");

to this:

Code:

$("'dt.consumer' + dd").css(". . .");

Fumigator · 06-09-2009, 08:22 PM

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.