Question

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

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

在具有班级.actor-bio的第二个div上，它显示第一个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;

        });
}

Answer 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'))});

});

jQuery使用.attr（）。first（）检测第一段高度不同

1 个答案: