Question

<br/>
<a href="#">News</a>
<br/>
This is the first line
<br/>
This is the second line
<br/>
This is the third line

有没有办法用标签包装每个文本行！文本的内容不固定，它将动态出现。如果我使用jquery：包含选择器，则无法动态内容行。感谢

Answer 1

您需要将HTML放在某个容器中并应用以下jQuery。我使用了div id =“data”。
这是工作代码：

<div id="data">
    <br/>
    <a href="#">News</a>
    <br/>
    This is the first line
    <br/>
    This is the second line
    <br/>
    This is the third line
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var data = $('#data').html();
    var sbstr = data.split('<br>');

    var new_data = '';
    // wrap each line with a tag, you can use 'a', 'li' or any other tag.
    for(x in sbstr){
        new_data += '<a href="#">'+sbstr[x]+'</a><br>';
    }

    //replace old data with new one
    $('#data').html(new_data);
});
</script>

Answer 2

假设你有一个id = test：

的包装器

var test = $('#test');
var temp = test.html().split('<br>');
var insert = "";

$.each(temp, function(index) {
   insert += '<div class="wrap">' + this + '</div>';       
});
test.html(insert);

此处示例：http://jsfiddle.net/GMJxG/1/

编辑：@ Arvind07打败了我！我会留下这个例子。

Answer 3

<div id="contents">
    <br/>
    <a href="#">News</a>
    <br/>
    This is the first line
    <br/>
    This is the second line
    <br/>
    This is the third line
</div>

$('#contents').contents().remove('br').filter(function() {
    var node = $(this);
    if(node.context.nodeType == 3 && node.context.length != 1) {
      node = node.wrap('<div/>');
    }
    return node;
});

使用jquery选择文本行和span标记

3 个答案: