5

次のコードが自分のページに書き込まれている状況があります。

<div>
    Some text here which is not wrapped in tags
    <p>Some more text which is fine</p>
    <p>Blah blah another good line</p>
</div>

この場合、それは常にpタグでラップされていない最初の行であるように見えます。これにより、毎回ではありませんが、これを簡単に解決できる可能性があります。時々それは大丈夫です。

私がする必要があるのは、最初の行が折り返されているかどうかを識別し、そうでない場合はそれを折り返すことです。

残念ながら、この問題をどこから始めればよいかわからないので、助けていただければ幸いです。

4

5 に答える 5

4

このコードを使用して、タグでラップされていないTextNodeをラップしてみてください<p>。

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], whitespace = /^\s*$/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || !whitespace.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
    }

    var textnodes = getTextNodesIn($("#demo")[0])​​​​;
    for(var i=0; i < textnodes.length; i++){
        if($(textnodes[i]).parent().is("#demo")){
            $(textnodes[i]).wrap("<p>");
        }
    }​

これが実際の動作を示すjsfiddleです。

PS：TextNode検出部分はこの回答から借用されています

于 2012-12-12T09:37:59.283 に答える
4

ここに行きます：http：//jsfiddle.net/RNt6A/

$('div').wrapInner('<p></p>');​​​​
$('div p > p').detach().insertAfter('div p');
于 2012-12-12T10:12:00.153 に答える
2

これを試して ：-

<div class="container">
Some text here which is not wrapped in tags
<p>Some more text which is fine</p>
<p>Blah blah another good line</p>
</div>​

JS

    $(function(){
    var $temp = $('<div>');
    $('div.container p').each(function(){
            $(this).appendTo($temp);            
    });     

    if($.trim( $('div.container').html() ).length){
       var $pTag = $('<p>').html($('.container').html()); 
        $('div.container').html($pTag);
    }

    $('div.container').append($temp.html());
});
​

これが実際の例です：-

http://jsfiddle.net/dhMSN/12

于 2012-12-12T10:05:00.233 に答える
0

jQueryはテキストノードの処理が苦手なので、これに対して直接DOM操作を行う必要があります。これも「トリム」機能を使用します。。そのjsfiddleに。

var d = $("div")[0];

for(var i=0; i<d.childNodes.length; i++) {
    if(d.childNodes[i].nodeType === 3 &&
       d.childNodes[i].textContent.replace(/^\s+|\s+$/g, "")) {
        wrapNode(d.childNodes[i]);
    }
}

function wrapNode(node) {
    $(node).replaceWith("<h1>" + node.textContent + "</h1>");
}
于 2012-12-12T09:57:11.720 に答える
0

同様のニーズに遭遇し、ソリューション@Arash_Milaniを採用しようとしました。ソリューションは機能しましたが、ページでajax呼び出しを行う必要があるときに競合が発生しました。

.contents()少し掘り下げた後、次の方法を使用してapi.jquery.comでかなり簡単な解決策を見つけました。

$('.wrapper').contents().filter(function() {
  return this.nodeType === 3;
}).wrap('<p class="fixed"></p>').end();
p.good {
  color: #09f;
}
p.fixed {
  color: #ff0000;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  Some plain text not wrapped in any html element.
  <p class="good">This text is properly wrapped in a paragraph element.</p>
</div>

于 2017-01-06T07:11:52.647 に答える