• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 535
  • Last Modified:

jquery, parent() explanation

Hello experts,
I am trying to find out who is the parent of  "ul li.next-button" for my jquery function to display the "hola"  message. Below you will see snippets of the code. What I am doing wrong?

thanks

Winter

html:

      <div id="cars">
                        <div id="step-1">
                              <div class="headers">
                                    <h2 class="name-photo"></h2>
                              </div>
                              <div id="name-of-form">  
                                    <form action="">  
                                          <fieldset>  
                                                <label id="name_label" for="name_label"></label>  
                                                <input type="text" class="text-input" value="" size="30" id="name-input" name="name">
                                          </fieldset>
                                    </form>
                              </div>
                        </div>
                        <div id="step-2">
                              <div class="headers">
                                    <h2 class="cars brands"></h2>
                              </div>
                              <p class="skip-button"><a href="#">Skip</a></p>
                        </div>
                        <div>
                              <ul>
                                    <li class="back-button"><a href="#">Back</a></li>
                                    <li class="next-button"><a href="#">Next</a></li>
                              </ul>      
                        </div>
                  </div>

Jquery part:

$(document).ready(function () {                  
                  $('ul li.next-button').click(function () {
                        if ($(this).parent().parent().attr('id') == 'step-1') {
                              alert("hola!!");
                        }
                  });
});

Thanksagain
0
glepiza
Asked:
glepiza
  • 7
  • 5
  • 2
2 Solutions
 
leakim971PluritechnicianCommented:
$(this).parent().parent() is the div :


   
  • You may use : parents
0
 
leakim971PluritechnicianCommented:
the div :


<div> <-------- this one
                              <ul>
                                    <li class="back-button"><a href="#">Back</a></li>

Open in new window

0
 
glepizaAuthor Commented:
Hi Leakim971,

Could you please explaing me a little better?
you mean that I would have to do something like:

$(document).ready(function () {                  
                  $('ul li.next-button').click(function () {
                        if ($(this).parents().attr('id') == 'step-1') {
                              alert("hola!!");
                        }
                  });
});
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
glepizaAuthor Commented:
And thanks for the quick answer by the way :)
0
 
glepizaAuthor Commented:
Actually, I think I was the one who did not explain clear, I am trying to reach "step-1" from "next-button". so, how many levels up I need to go to reach it?

Please let me know if I was clear. Sorry about my first question that was not clear.
0
 
leakim971PluritechnicianCommented:
>you mean that I would have to do something like:

don't have sense with "id", but if we have :




<div id="step-1" class="mytopdiv">

Open in new window

0
 
leakim971PluritechnicianCommented:
then :


$(document).ready(function () {                  
                  $('ul li.next-button').click(function () {
                        if ($(this).parents(".mytopdiv").attr('id') == 'step-1') {
                              alert("hola!!");
                        }
                  });
})

Open in new window

0
 
glepizaAuthor Commented:
For some reason it is not working for me....... that should work.... :(
0
 
cyberkiwiCommented:

$(document).ready(function  () {                  
                  $('ul li.next-button').click(function () {
                        if ($(this).parent().parent().parent().children().first().attr('id') == 'step-1') {
                              alert("hola!!");
                        }
                  });
});

Open in new window

0
 
leakim971PluritechnicianCommented:
With a good indentation we can find why, div id="step-1" is not a parent div of the ul :


<div id="cars">
    <div id="step-1">
	    <div class="headers">
		    <h2 class="name-photo"></h2>
    	</div>
	    <div id="name-of-form">  
		    <form action="">  
    			<fieldset>  
    				<label id="name_label" for="name_label"></label>  
    				<input type="text" class="text-input" value="" size="30" id="name-input" name="name">
    			</fieldset>
    		</form>
    	</div>
    </div>
    <div id="step-2">
	    <div class="headers">
    		<h2 class="cars brands"></h2>
	    </div>
    	<p class="skip-button"><a href="#">Skip</a></p>
    </div>
    <div>
        <ul>
            <li class="back-button"><a href="#">Back</a></li>
            <li class="next-button"><a href="#">Next</a></li>
        </ul>      
    </div>
</div>

Open in new window

0
 
cyberkiwiCommented:
The indentation in the question is fine for me :)
I saw it right away....
0
 
leakim971PluritechnicianCommented:
>The indentation in the question is fine for me :)
>I saw it right away....
Well done!

To get the div you want, I propose : $(this).parents(".mytopdiv").children(".foreigndiv").eq(0)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script language="javascript">
	$(document).ready(function () {                  
		$('ul li.next-button').click(function () {
			if($(this).parents(".mytopdiv").children(".foreigndiv").eq(0).attr("id") == 'step-1') {
				alert("hola!!");
			}
		});
	})
</script>
</head>
<body>
<div id="cars" class="mytopdiv">
    <div id="step-1" class="foreigndiv">
	    <div class="headers">
		    <h2 class="name-photo"></h2>
    	</div>
	    <div id="name-of-form">  
		    <form action="">  
    			<fieldset>  
    				<label id="name_label" for="name_label"></label>  
    				<input type="text" class="text-input" value="" size="30" id="name-input" name="name">
    			</fieldset>
    		</form>
    	</div>
    </div>
    <div id="step-2" class="foreigndiv">
	    <div class="headers">
    		<h2 class="cars brands"></h2>
	    </div>
    	<p class="skip-button"><a href="#">Skip</a></p>
    </div>
    <div>
        <ul>
            <li class="back-button"><a href="#">Back</a></li>
            <li class="next-button"><a href="#">Next</a></li>
        </ul>      
    </div>
</div>
</body>
</html>

Open in new window

0
 
glepizaAuthor Commented:
Thanks both of you. Your solutions worked very well.

I give more points to leakim971 because he made me see what was the real problem : div id="step-1" was not a parent div of the ul. Also, indentation should be something to always keep in, I usually forget that.

Thanks guys!!!
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks for the points!

>I give more points to leakim971 because he made me see what was the real problem
Thanks a lot to have understood that

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 7
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now