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
glepizaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.