Solved

jquery, parent() explanation

Posted on 2010-08-22
14
492 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
  • 7
  • 5
  • 2
14 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
$(this).parent().parent() is the div :


   
  • You may use : parents
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
the div :


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

Open in new window

0
 

Author Comment

by:glepiza
Comment Utility
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
 

Author Comment

by:glepiza
Comment Utility
And thanks for the quick answer by the way :)
0
 

Author Comment

by:glepiza
Comment Utility
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
Comment Utility
>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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

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

Expert Comment

by:cyberkiwi
Comment Utility

$(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
Comment Utility
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
Comment Utility
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
Comment Utility
>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
Comment Utility
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
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
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)

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now