如何检测当前不是的标签

时间:2017-03-14 06:48:03

标签: javascript jquery

我需要将<br />添加到< p ="minimize"> < /p>内的内容中当前即使字符串中有<br />,在输出中所有字符串都显示在1行中而没有<br /> 1}}。

以下代码似乎无法检测到<br />

jQuery(function(){

    var minimized_elements = $('p.minimize');

    minimized_elements.each(function(){    
        var t = $(this).text();        
        if(t.length < 100) return;

        $(this).html(
            t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Less</a></span>'
        );

    }); 

    $('a.more', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });

    $('a.less', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();    
    });

});

非常感谢您宝贵的意见和时间

1 个答案:

答案 0 :(得分:1)

的变化: -

< p ="minimize">需要<p class="minimize"> //remove space and add class

然后它会正常工作: -

实施例: -

jQuery(function(){

    var minimized_elements = $('p.minimize');

    minimized_elements.each(function(){    
        var t = $(this).text();        
        if(t.length < 100) return;

        $(this).html(
            t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Less</a></span>'
        );

    }); 

    $('a.more', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });

    $('a.less', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();    
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<p class="minimize"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus. <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p><br>
<p class="minimize"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus. <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>