Jump to content

How to select the child of the selected element only in jQuery


Noskiw

Recommended Posts

Basically I have a <dt> element inside a <dl> element, and a <dd> element inside the <dl>. Now I want to make it when the <dd> element is showing, make the <a>* element yellow, but only the <dd< element that is showing, there are several :)

 

* - The <a> element is inside the <dt> element

For any of uoi who don't understand, here is the code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    
        <title>INSERT TITLE HERE!</title>
        <meta http-equiv="Content-type" content="text/html; charsetUFT-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta http-equiv="imagetoolbar" content="no" />
        <link href="./css/core.css" rel="stylesheet" type="text/css" />
        <script src="./js/jquery.js" type="text/javascript"></script>
        <script src="./js/functions.js" type="text/javascript"></script>
        
    </head>
    
    <body>
        
        <h1 style="padding: 20px;">INSERT NAME HERE!</h1>

        <div id="wr">
        
            <dl id="acc">
            
                <dt id="2"><a href="#">Home</a></dt>
                <dd id="1"><?php include "./inc/homes.php"; ?></dd>
                
    <dt><a href="#">Hi!</a></dt>
                <dd>
                  <?php include "./inc/about.php"; ?>
                </dd>
                
                <dt><a href="#">Hi!</a></dt>
                <dd><?php include "./inc/mems.php"; ?></dd>
                
                <dt><a href="#">Hi!</a></dt>
                <dd><?php include "./inc/founded.php"; ?></dd>
                
                <dt><a href="#">Hi!</a></dt>
                <dd><?php include "./inc/contact.php"; ?></dd>
        
            </dl>
            
        </div>

    </body>
    
</html>

 

$(document).ready(function(){
    if($("#acc").length > 0){
        
        $("dd#1").slideToggle(200);
        $("dt#2").addClass("act");
        
        $("#acc dt").click(function(){
            var sel = $(this);
            
            sel.addClass("act current");   
                             
            if($("dl").children("dd").is(":visible")){
                if($("#acc dt").hasClass("current")){
                    $("#acc dt").children("a").addClass("asd");
                }
            }
            
            sel.parent().children("dd").each(function(){
                if($(this).is(":visible") && !$(this).prev("dt").hasClass("current")){
                    if($(this).prev("dt").hasClass("act")){
                        $(this).prev("dt").removeClass("act");
                    }
                    
                    $(this).slideUp(200);
                    
                }
            });
            
            sel.next().slideToggle(200, function(){
                if(!$(this).is(":visible")){
                    $(this).prev("dd").removeClass("act");
                }
                
                sel.removeClass("current");
                
                if(!$(this).is(":visible")){
                    if($(this).click){
                        sel.removeClass("act");
                    }
                }
            });
            
            return false;
            
        });
    }
});

 

This is the bit I'm struggling with

 

if($("dl").children("dd").is(":visible")){
                if($("#acc dt").hasClass("current")){
                    $("#acc dt").children("a").addClass("asd");
                }
            }

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.