Question

我想知道无论如何要在br标签后隐藏文字。我有这样的内容

<div class="lyric">
 Track List: 
 <br>1/a
 <br>2/b
 <br>3/c
 <br>4/d
 <br>5/e 
 <br>6/f   
 <br>
</div>

我只想要显示3个曲目，隐藏另一个曲目，当人们点击按钮显示更多时它会显示所有曲目。 EX：

<div class="lyric">
 Track List: 
 <br>1/a
 <br>2/b
 <br>3/c
</div>

在我的内容看起来像这样之前：

<div class="lyric">
 Track List: 
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
</div>

所以我的代码看起来像这样：

if ( $('.lyric div').length > 5 ) {        
        $('.lyric div:gt(5)').hide();
        $('.show-more').removeClass('hidden');
    }

现在我的内容发生了变化，看起来像第一个例子，所以我不知道如何隐藏它

Answer 1

基本上你不能没有重构DOM，因为你不能在没有父元素的情况下找出剩余的文本块。

jQuery可以轻松更改DOM：）

JSFiddle：http://jsfiddle.net/TrueBlueAussie/pc1k9Lt0/4/

// Wrap all text elements in divs
$('.lyric').each(function () {
    var $lyric = $(this);
    var contents = $(this).contents();
    contents.each(function () {
        $lyric.append($('<div>').html(this));
    });
        // Remove all the br elements
    $('br', $lyric).parent().remove();
});

// Hide what you do not want visible
$('.lyric div:gt(2)').hide();

// Toggle visibility on click
$('#show').click(function () {
    $('.lyric div:gt(2)').toggle();
});

如果您愿意，可以使用UL和LI执行相同操作（只需插入UL作为父级，然后使用LI代替DIV在我的例子中）

e.g。 http://jsfiddle.net/TrueBlueAussie/pc1k9Lt0/8/

注意：我需要忽略任何空白文本块 - 即最后一项：）

// Wrap all text elements in LIs
$('.lyric').each(function () {
    var $lyric = $(this);
    var contents = $(this).contents();
    contents.each(function () {
        var $li = $('<li>').html(this);
        if ($.trim($li.text()) != ""){
            $lyric.append($li);
        }
    });
        // Remove all the br elements
    $('br', $lyric).parent().remove();
    $lyric.children().wrapAll('<ul>');
});

// Hide what you do not want visible
$('.lyric li:gt(2)').hide();

// Toggle visibility on click
$('#show').click(function () {
    $('.lyric li:gt(2)').toggle();
});

br标签后隐藏文字

1 个答案: