traversing classes using Jquery

Question

Hi, I'm brand new at working with Jquery, this is actually my first real project with it, and I'm having a little bit of trouble. Here is my HTML: Edit: alright, I fleshed out the code, and included where the function is being called.

 <tr><th scope="row"><?php echo $box_name[$i] ?></th>
    <td>

    <div class="parent_div">
     <div><strong>Select an image</strong></div>
     <p><?php $this->_addDropDown( $box[$i].'_option', array( 'default' => 'Default', 'custom_image' => 'Custom Image') ); ?></p>


     <div class="upload_container">
      <div>Upload a new image: <a href="" id="upload_button" class="thickbox upload_file">Upload File</a></div>
      <?php $this->_addHidden( $box[$i] ); ?>
      <?php $this->_addDefaultHidden( 'default_'.$box[$i] ); ?>


      <?php $box_url = ( ! empty( $wp_theme_options[$box[$i]] ) ) ? $wp_theme_options[$box[$i]] : $wp_theme_options['default_'.$box[$i]]; ?>
      <?php if ( ! empty( $box_url ) ) : ?>
       <?php $box_path = iThemesFileUtility::get_file_from_url( $box_url ); ?>
       <?php if ( ! is_wp_error( $box_path ) ) : ?>
        <?php $box_thumb = iThemesFileUtility::resize_image( $box_path, $this->_options['box_preview_width'], $this->_options['box_preview_height'], true ); ?>
        <?php if ( ! is_wp_error( $box_thumb ) ) : ?>
         <a href="<?php echo $box_url; ?>" target="_blank"><img id="image_thumbnail" src="<?php echo $box_thumb['url']; ?>" /></a>
     <?php endif; ?>   
     </div>
    </div>

    </td>

  </tr>


<?php endfor; ?>

What I currently am trying to do is something like.

function refreshImageBoxOptions(id) {
 if($("#this_item" + id).attr("value") == 'default') {
   $(this).parents(".parent_div").find(".child_div").slideUp();
 }
 else if($("#this_item" + id).attr("value") == 'something_else') {
   $(this).parents(".parent_div").find(".child_div").slideDown();
 }
}

If I cut some of the code out, I can get the $(".parent_div").slideUp(); and the $(".child_div").slideUp(); to work just fine. Its only when I try to use the $(this).parents(".parent_div").find(".child_div").slideUp(); that I have a problem.

I've been through this site and many others, and I think I just need a fresh set of eyes to see if I'm setting something up wrong here.

This is where the function is being called from.

$(document).ready(
 function(){

        $(".child_div").hide();

      $("#left_option").change(
   function(e) {
    refreshImageBoxOptions("box_left");
    ;

   }
  );
  $("#middle_option").change(
   function(e) {
    refreshImageBoxOptions("box_middle");

   }
  );
  $("#right_option").change(
   function(e) {
    refreshImageBoxOptions("box_right");

   }
  );

}
);
}) (jQuery);

Answer 1

Perhaps change this:

$(this).parents(".parent_div").find(".child_div")

to this:

$(this).parents(".parent_div").children(".child_div")

Guessing here since I'm not sure of the origin of this - good luck.

Answer 2

It sounds like you have an incorrect context. The 'this' inside the function refers to the element that triggered the event but we cannot tell what that is.

Can you let me know the context of the calls to this function. e.g what is the 'this' context? If you could paste the js that actually calls these functions it would help.

Are you sure the 'this' at that time is a child of the div.parent_div?

Answer 3

alright, so I figured it out. When my function was being called, I wasn't passing this through to the function, so it had no idea what 'this' was.

$("#option").change(
  function(e) {
     refreshImageBoxOptions(this,"box_left");
   }
 );



function refreshImageBoxOptions(current,id) {
 if($("#" + id + "_option").attr("value") == 'default') {
  $(current).parents(".parent").find(".child").slideUp();
 else if($("#" + id + "_option").attr("value") == 'custom_image') {
  $(current).parents(".parent").find(".child").slideDown();
 }
}

Thank you for all the great ideas!