Solved

jquery, parent() explanation

Posted on 2010-08-22
14
496 Views
Last Modified: 2012-06-27
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
Comment
Question by:glepiza
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 2
14 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33496973
$(this).parent().parent() is the div :


   
  • You may use : parents
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33496974
the div :


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

Open in new window

0
 

Author Comment

by:glepiza
ID: 33496986
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
Industry Leaders: 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!

 

Author Comment

by:glepiza
ID: 33496989
And thanks for the quick answer by the way :)
0
 

Author Comment

by:glepiza
ID: 33496997
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33497001
>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
 
LVL 82

Expert Comment

by:leakim971
ID: 33497006
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
 

Author Comment

by:glepiza
ID: 33497176
For some reason it is not working for me....... that should work.... :(
0
 
LVL 58

Expert Comment

by:cyberkiwi
ID: 33497227

$(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
 
LVL 82

Expert Comment

by:leakim971
ID: 33497243
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
 
LVL 58

Assisted Solution

by:cyberkiwi
cyberkiwi earned 100 total points
ID: 33497249
The indentation in the question is fine for me :)
I saw it right away....
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 400 total points
ID: 33497278
>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
 

Author Closing Comment

by:glepiza
ID: 33497336
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33497353
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Date on a table 16 37
disable and enable textboxes in dataTable 7 31
Hide and Unhide Table 6 27
assigning javascript variable to php variable 8 43
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question