0

我正在尝试获取 div 中的第一段高度并将其存储为属性。

它适用于 class 的第一个 div 中的第一段.actor-bio。

在带有类的第二个 div 上，.actor-bio它显示第一个 div 段落的属性。

    //has to be in an each to get different values of varying paragraph lengths
    $('.actor-bio').each(function(){

        //Gets original height of the content area
        $(this).attr('originalheight', $(this).innerHeight());

        //Gets the first paragraph height
        $('p', this).first().attr('firstpheight', $('p',this).first().innerHeight());

        //Gets the first h3 height
        $('h3', this).first().attr('firstheaderheight', $('h3',this).first().innerHeight());

        //Sets the height of the wrapper to first paragraph height + h3 height
        $(this).css({height : parseFloat($('p', $(this).closest('.actor-bio-wrapper')).first().attr('firstpheight')) + parseFloat($('h3', $(this).closest('.actor-bio-wrapper')).first().attr('firstheaderheight'))});

    });

有没有人有任何建议？

提前致谢

*编辑 16:44GMT 22/06/2012 * *

这是 jsFiddle 链接：http: //jsfiddle.net/SqzL5/2

令人讨厌的是，我的代码可以与 jsFiddle 一起使用，它必须与其他(this)地方的另一个“”混淆，从而导致问题。使用 defuz 的方法也适用于 jsFiddle，但不适用于我的网站 grr。http://jsfiddle.net/SqzL5/1/

*编辑 11:17GMT 26/06/2012 * *

是的，我放弃了这种方法，因为代码似乎只获得了 1 段值。无论如何，我这样做了。

    // Read more after first paragraph

if($('.read-bio').length>0){

        //has to be in an each to get different values of varying paragraph lengths
        $('.actor-bio').each(function(index, item){

                $('p:not(:first)', item).hide();

        });

        $('.read-bio').click(function(){

                //If class has class 'clicked' animate to first p height + h3 height
                if($(this).hasClass('clicked')){
                        $('.actor-bio p:not(:first)', $(this).closest('.actor-bio-wrapper')).animate({height: 'toggle'});
                        $(this).html('&raquo; <strong>Read</strong> More').removeClass('clicked');
                } 

                //If no 'clicked' class, animate the height to the original height of the text
                else{

                        $('.actor-bio p:not(:first)', $(this).closest('.actor-bio-wrapper')).animate({height: 'toggle'});
                        $(this).html('&raquo; <strong>Read</strong> Less').addClass('clicked');

                }

                //stops the stupid # appearing the address bar
                return false;

        });
}
4

1 回答 1

1

我认为你没有this正确使用。尝试：

//has to be in an each to get different values of varying paragraph lengths
$('.actor-bio').each(function(index, item){

    //Gets original height of the content area
    $(item).attr('originalheight', $(item).innerHeight());

    //Gets the first paragraph height
    $('p', item).first().attr('firstpheight', $('p',item).first().innerHeight());

    //Gets the first h3 height
    $('h3', item).first().attr('firstheaderheight', $('h3',item).first().innerHeight());

    //Sets the height of the wrapper to first paragraph height + h3 height
    $(item).css({height : parseFloat($('p', $(item).closest('.actor-bio-wrapper')).first().attr('firstpheight')) + parseFloat($('h3', $(this).closest('.actor-bio-wrapper')).first().attr('firstheaderheight'))});

});
于 2012-06-21T16:30:43.390 回答