0

div 内の最初の段落の高さを取得して、属性として保存しようとしています。

class を持つ最初の div の最初の段落で機能し.actor-bioます。

クラスの 2 番目の 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 に答える