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

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

Is there any way to wrap each text line with tag! and content of the text is not fixed and it will come dynamically. If I use jquery :contains selector, no way for dynamically content lines. Thanks

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

3 个解决方案

#1

Assuming you have a wrapper with id = test:

假设你有一个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);

Example here: http://jsfiddle.net/GMJxG/1/

示例:http://jsfiddle.net/GMJxG/1/

Edit: @Arvind07 beat me to it! I'll leave this here for the example.

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

#2

You need to place the HTML in some container and apply following jQuery. I have used div id="data".
This is the working code:

您需要将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>

#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;
});

#1