Question

<div class="more">
<p>
  Your trip originates&nbsp;in Buffalo Narrows&nbsp;where you are flown via
charter floatplane to Vermilion Lake. Vermilion and other nearows&nbsp;where you are flown via
charter floatplane to Vermilion Lake. Vermilion and other nearby
lakes&nbsp;provide a variety&nbsp;of terrain and adventure, and are abundant
with walleye, lake trout and northern pike.
<ul>
  <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
</ul>
</p>

Jquery的

$(document).ready(function() {
// Configure/customize these variables.
var animation_time = 1000;  // this
var showChar = 300;  // How many characters are shown by default
var b = showChar+100;
var space = " ";
var dots = "...";
var stars = "***";
var moretext = "Read More >";
var lesstext = "Read Less";
var count = 0;
var list_limit = 4; // keep this 1 less than what you want
var a = false;

$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {
    count = 0;
    for (var i = showChar; i < b; i++) 
    {
            if (content[i] == space)
             {
                var c = content.substr(0, count);
             }

             count = count + 1;
    }

        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + dots+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});



$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } 
    else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle(animation_time);
    $(this).prev().toggle(animation_time);
    return false;
});

我试图在页面加载时隐藏此div的前100个字符，但它只是段落中的字符而列表中没有隐藏。 Plz告诉我该怎么做。我真的需要帮助，这可能是var内容没有采取div的整个html然后它只是删除段落中的字符。

Answer 1

你可以尝试使用jQuery来获取字符串并将其剪掉。至少非常，将文本包装在<span>中

<div class="more">
  <p>
    <span class="my-text-wrap">
      //Your text here
    </span>
    <ul>
      ...
    </ul>
  </p>
</div>

已编辑：您可以使用.find()找到<span>循环中当前<div>的{{1}}子元素

.each()

如何在Jquery中隐藏一半div

1 个答案: