从可重复的div中删除HTML标记

时间:2017-07-05 21:47:46

标签: javascript jquery html css

我正在编写一个包含这样的HTML代码的代码,我想用160个字符剥离/替换blog-excerpt区域内的HTML标记。

运行我的代码后,在两个div中显示相同的文本数据。但我需要显示实际的文字

<div class="blog-item">
    <div class="blog-excerpt" style="color:red">
        <b>Here is the</b>  Sample Text <i> One (01) </i> 
    </div>
</div>
<div class="blog-item"  style="color:blue">
    <div class="blog-excerpt">
       <b>Here is the</b>  Sample Text <i> Two (02) </i> 
    </div>
</div>

现在我想从 "blog-excerpt" div内部对HTML标记进行条带化。因此,所有HTML代码实际上都是纯文本,我还希望为 "blog-excerpt" 内容提供160个字符的限制。

我使用了跟随jquery代码来做到这一点。

var str = $( ".blog-excerpt" ).text();
$( ".blog-excerpt" ).text( str );
$(".blog-excerpt").text(function(index, currentText) {
return currentText.substr(0, 160);

它的工作原理但不幸的是,在运行我的jquery代码后,"blog-item"中显示了相同的文本。

请帮我完成该代码。

1 个答案:

答案 0 :(得分:-1)

我使用以下代码解决了该问题。 $( ".blog-excerpt" ).text( str ); 我的代码错了。我删除了它,它的工作原理

    var str = $( ".blog-excerpt" ).text();
    $(".blog-excerpt").text(function(index, currentText) {
    return currentText.substr(0, 160);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blog-item">
    <div class="blog-excerpt" style="color:red">
     <b>Here is the</b>  Sample Text <i> One (01) </i> 
 </div>
    </div>
    <div class="blog-item"  style="color:blue">
    <div class="blog-excerpt">
       <b>Here is the</b>  Sample Text <i> Two (02) </i> 
    </div>
    </div>