Question

我有一段：

<p>red orange yellow green blue indigo violet</p>

我需要将结束文本包装在我可以隐藏/显示的内容中，如下所示：

<p>red orange yellow green 
  <a href="#">...Show More</a>
  <span="unhideme">blue indigo violet</span>
</p>

这是我得到了多远：

<p>red orange yellow green 
  <a href="#">...Show More</a> 
  blue indigo violet
</p>

是否有某种说法＆＃34;选择a标签后的所有文字并将其包裹在一个范围内＆＃34;用jquery？或者其他一些解决方案来生成＆＃34;阅读更多＆＃34;用jquery按钮？

Answer 1

只需解析p标签的HTML即可。首先获取所有内容然后将其分解，然后在再次将其添加为HTML之前附加a和span标记。

var allText = $("p").html();
var firstHalf = allText.substring(0,INDEX AT WHICH YOU WOULD LIKE TO STOP);
var secondHalf = allText.substring(INDEX AT WHICH YOU WOULD LIKE TO STOP+1);
var newHTML = firstHalf + '<a href="#">...Show More</a><span class="unhideme">' + secondhalf + "</span>";

$("p").html(newHTML);

Answer 2

这可能一个开始：

$('p').each(function () {
    var $p = $(this);
    var words = $p.html().split(' ');
    $p.html('');

    for (var i = 0; i < 3; i++) {
        $p.append(words[i] + ' ');
    }

    if (words.length > 3) {
        var htmlStr = '<a href="#">...Show More</a><span class="unhideme">';
        for (var i = 3; i < words.length; i++) {
            htmlStr += words[i] + ' ';
        }
        htmlStr += '</span>';

        $p.append(htmlStr);
    }
}); 

$('p').on('click', 'a', function () {
     $(this).hide().next().show();
});

3是硬编码的，因此您可能想要更改它。它基本上代表了你想要展示的项目数量。

或

如果您希望插件为您执行所有脏工作，请查看trunk8以获取jquery。

如何使用jquery选择元素后的文本？

2 个答案: