使用Jquery遍历类

时间:2009-08-05 14:20:11

标签: jquery parent-child traversal

我在与Jquery合作时是全新的,这实际上是我的第一个真正的项目,我遇到了一些麻烦。这是我的HTML:编辑:好吧,我充实了代码,并包含了调用函数的位置。

  
 <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; ?>

我目前正在努力做的事情就像。

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();
 }
}

如果我删除了一些代码,我可以得到$(“。parent_div”)。slideUp();和$(“。child_div”)。slideUp();工作得很好。它只有当我尝试使用$(this).parents(“。parent_div”)。find(“。child_div”)。slideUp();我有一个问题。

我经历过这个网站以及其他许多网站,我想我只需要一双新的眼睛,看看我是否在这里设置错误。

这是调用函数的地方。

$(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);

3 个答案:

答案 0 :(得分:1)

听起来你的背景不正确。函数内部的'this'指的是触发事件的元素,但我们无法分辨它是什么。

您能告诉我这个函数调用的上下文吗?例如什么是'这个'背景? 如果您可以粘贴实际调用这些函数的js,那将会有所帮助。

你确定当时的'this'是div.parent_div的孩子吗?

答案 1 :(得分:0)

或许改变这个:

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

到此:

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

在这里猜测,因为我不确定this的起源 - 祝你好运。

答案 2 :(得分:0)

好吧,所以我明白了。当我的函数被调用时,我没有把它传递给函数,所以它不知道'这个'是什么。

$("#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();
 }
}

感谢所有好主意!