PDA

View Full Version : 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.

<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


$("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:$("dt.consumer > dd").css(". . ."); to this:$("'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. :thumbsup: