jquery select DIV that comes after parent DIV.

Brad Bansner
Brad Bansner used Ask the Experts™
on
I have HTML structured like the attached code. When the image is clicked, I need to jQuery select the detailscreenexercises DIV that comes right after it. How do I syntax that selector? Something like:

$(this).parent().next.detailscreenexercises

Thank you!
<div class="detailscreendate">
	<img>
</div>
<div class="detailscreenexercises"></div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
It may be what you want:
http://jsfiddle.net/zeezt/6/
.. or at least lead you to it.
leakim971Multitechnician
Top Expert 2014

Commented:
You may use : $(this).parent().next(".detailscreenexercises")
Success in ‘20 With a Profitable Pricing Strategy

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

Brad BansnerWeb Developer

Author

Commented:
Firebug says: $(this).parent().next.detailscreenexercises is undefined

I'm attaching code (or just one example of the HTML I'm trying to script.

Thanks.
<script type="text/javascript">
	$(function(){
		$('.gr_mwc_dir').click(function(){
			if ($(this).attr('src')=="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {
				$(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_diropen.png");
				$('.detailscreenexercises').slideUp(1000);
				$(this).parent().next('.detailscreenexercises').slideDown(1000);
				$('#panelleft').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel.asp?cur_day='+$(this).attr('id'), function(){
					$('#panelleft').fadeIn(400);
				});
				$(this).parent().next.detailscreenexercises.slideDown(1000);
			} else {
				$(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_dirclosed.png");
				$('.detailscreenexercises').slideUp(1000);
			}
		});
	});
</script> 

<div class="detailscreendate">
	<img class="gr_mwc_dir" id="day_5_19_2011" src="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png" width="9" height="9" border="0" /><b>19 May 2011</b>
</div>
<div class="detailscreendatelabel">
	<span class="red"><b>Cardio</b></span>
</div>
<div class="detailscreendatelabel">
	<span class="blue"><b>Balance</b></span>
</div>
<div class="clear">
</div>
<div class="detailscreenexercises">
	<div class="detailscreencardio1">
	</div>
	<div class="detailscreencardio2">
		<a href="javascript:openWin_cust('https://www.myexerciserx.com/mfc_form_ep_desc4.asp?exerciseid=865&amp;patientid=298&amp;editmfc=10','1000','800');">3 Mile Run</a>
	</div>
	<div class="detailscreencardio3">
	</div>
	<div class="detailscreenbalance1">
	</div>
	<div class="detailscreenbalance2">
		<a href="javascript:openWin_cust('https://www.myexerciserx.com/mfc_form_ep_desc4.asp?exerciseid=37&amp;patientid=298&amp;editmfc=10','1000','800');">Balance #1</a>
	</div>
	<div class="detailscreenbalance3">
	</div>
</div>

Open in new window

Brad BansnerWeb Developer

Author

Commented:
Wait, nevermind. That was some extraneous code I had in there. No error now, but I still don't get the effect for some reason.
Brad BansnerWeb Developer

Author

Commented:
In the code above, I removed this from the script:

$(this).parent().next.detailscreenexercises.slideDown(1000);

Did not mean for that to be there.
leakim971Multitechnician
Top Expert 2014

Commented:
>Firebug says: $(this).parent().next.detailscreenexercises is undefined

$(this).parent().next.detailscreenexercises versus
$(this).parent().next(".detailscreenexercises")
Brad BansnerWeb Developer

Author

Commented:
Correct. I fixed that. Here is my script and a snippet of HTML:

<script type="text/javascript">
      $(function(){
            $('.gr_mwc_dir').click(function(){
                  if ($(this).attr('src')=="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {
                        $(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_diropen.png");
                        $('.detailscreenexercises').slideUp(1000);
                        $(this).parent().next(".detailscreenexercises").slideDown(1000);
                        $('#panelleft').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel.asp?cur_day='+$(this).attr('id'), function(){
                              $('#panelleft').fadeIn(400);
                        });
                  } else {
                        $(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_dirclosed.png");
                        $('.detailscreenexercises').slideUp(1000);
                  }
            });
      });
</script>

<div class="detailscreendate">
      <img class="gr_mwc_dir" id="day_5_22_2011" src="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png" width="9" height="9" border="0" /><b>22 May 2011</b>
</div>
<div class="detailscreendatelabel">
      <span class="red"><b>Cardio</b></span>
</div>
<div class="detailscreendatelabel">
      <span class="blue"><b>Balance</b></span>
</div>
<div class="clear">
</div>
<div class="detailscreenexercises">
      <div class="detailscreencardio1">
      </div>
      <div class="detailscreencardio2">
            <a href="javascript:openWin_cust('https://www.myexerciserx.com/mfc_form_ep_desc4.asp?exerciseid=867&patientid=298&editmfc=10','1000','800');">5 Mile Run</a>
      </div>
      <div class="detailscreencardio3">
      </div>
      <div class="detailscreenbalance1">
      </div>
      <div class="detailscreenbalance2">
            <a href="javascript:openWin_cust('https://www.myexerciserx.com/mfc_form_ep_desc4.asp?exerciseid=37&patientid=298&editmfc=10','1000','800');">Balance #1</a>
      </div>
      <div class="detailscreenbalance3">
      </div>
</div>
Multitechnician
Top Expert 2014
Commented:
Try the following :
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
      $(function(){
            $('.gr_mwc_dir').click(function(){
                  if ($(this).attr('src')=="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {
                        $(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_diropen.png");
                        $('.detailscreenexercises').slideUp(1000);
                        $(this).parent().nextAll(".detailscreenexercises").eq(0).slideDown(1000);
                        $('#panelleft').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel.asp?cur_day='+$(this).attr('id'), function(){
                              $('#panelleft').fadeIn(400);
                        });
                  } else {
                        $(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_dirclosed.png");
                        $('.detailscreenexercises').slideUp(1000);
                  }
            });
      });
</script>
</head>
<body>
<div class="detailscreendate">
      <img class="gr_mwc_dir" id="day_5_22_2011" src="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png" width="9" height="9" border="0" /><b>22 May 2011</b>
</div>
<div class="detailscreendatelabel">
      <span class="red"><b>Cardio</b></span>
</div>
<div class="detailscreendatelabel">
      <span class="blue"><b>Balance</b></span>
</div>
<div class="clear">
</div>
<div class="detailscreenexercises">
      <div class="detailscreencardio1">
      </div>
      <div class="detailscreencardio2">
            <a href="javascript:openWin_cust('https://www.myexerciserx.com/mfc_form_ep_desc4.asp?exerciseid=867&amp;patientid=298&amp;editmfc=10','1000','800');">5 Mile Run</a>
      </div>
      <div class="detailscreencardio3">
      </div>
      <div class="detailscreenbalance1">
      </div>
      <div class="detailscreenbalance2">
            <a href="javascript:openWin_cust('https://www.myexerciserx.com/mfc_form_ep_desc4.asp?exerciseid=37&amp;patientid=298&amp;editmfc=10','1000','800');">Balance #1</a>
      </div>
      <div class="detailscreenbalance3">
      </div>
</div>
</body></html>

Open in new window

Brad BansnerWeb Developer

Author

Commented:
That works, thanks. Just to make sure I understand, does this sound like what you did?

1. Go to parent of clicked object.
2. Select all of the sibling objects of the parent.
3. Find anything with class detailscreenexercises.
4. Take the first instance eq(0).
leakim971Multitechnician
Top Expert 2014

Commented:
>does this sound like what you did?

yes, thanks for the points!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial