asked on

jquery select DIV that comes after parent DIV.

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

Lukasz Chmielewski

It may be what you want:
http://jsfiddle.net/zeezt/6/

Lukasz Chmielewski

.. or at least lead you to it.

leakim971

You may use : $(this).parent().next(".detailscreenexercises")

Brad Bansner

ASKER

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 Bansner

ASKER

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 Bansner

ASKER

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

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

Did not mean for that to be there.

leakim971

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

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

Brad Bansner

ASKER

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>

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Brad Bansner

ASKER

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).

leakim971

>does this sound like what you did?

yes, thanks for the points!