2016-07-19 20 views
11

jQueryを使用してHTMLドキュメントにイントロ/ヘルプテキストをラップしようとしています。jQuery:2つの閉じたhtmlタグの間でテキストを選択する方法

たとえば、添付のコードスニペットをご覧ください。 2番目の終了タグは<p>以外でもかまいません。

var txtHelp = jQuery('b.page-title').nextUntil('p').text(); 
 
console.log(txtHelp); 
 

 
//jQuery('b.page-title').nextUntil('p').text().wrap("<p />");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b> 
 
How to select this text and wrap it in new P-Tag 
 
<p align="center">This can by any html tag</p>

+2

'$( 'b.pageタイトル')を参照してください。 .nextSibling.textContent' – haim770

答えて

8

nextUntil()方法はtextnodesを選択しません。

あなたはノードのnextSiblingプロパティでテキストノードを取得し、テキストノードのtextContentプロパティでテキストコンテンツを取得することができます。

var txtHelp = jQuery('b.page-title')[0] // get the dom object 
 
    .nextSibling // get the text node next to it 
 
    .textContent; // get text content 
 
console.log(txtHelp);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b> 
 
How to select this text and wrap it in new P-Tag 
 
<p align="center">This can by any html tag</p>


UPDATE 1:あなたがpタグで要素をラップしたい場合は、同じようにそれを行います。

$(// wrap by jquery to convert to jQuery object 
 
    $('b.page-title')[0] // get the dom element also you can use `get(0)` 
 
    .nextSibling // get the textnode which is next to it 
 
).wrap('<p/>'); // wrap the element by p tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b> 
 
How to select this text and wrap it in new P-Tag 
 
<p align="center">This can by any html tag</p>


UPDATE 2:それはbrタグが含まれており、テキストとしてそれを含めたい場合は、contents()方法を使用してトリッキーな何かをします。純粋なjQueryのアプローチについては

var get = false; 
 

 
$($('b.page-title') 
 
    .parent() // get it's parent 
 
    .contents() // get all children node including text node 
 
    .filter(function() { 
 
    if ($(this).is('b.page-title')) { 
 
     get = true; // if element is 'b.page-title' then set flag true , we need to get element from here 
 
     return false // return false that we don't need the 'b.page-title' 
 
    } 
 
    if ($(this).is('p')) // check element is `p`, that we need to get element uptop tag 
 
     get = false; // update flag 
 
    return get; // return the flag for filtering 
 
    })).wrapAll('<p/>'); // use wrapAll to wrap all elements withing single tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b> 
 
How to select this text 
 
<br/>and wrap it in new P-Tag 
 
<p align="center">This can by any html tag</p>

+0

ありがとうこれは完全に動作します.. ここで[0]の重要性は何ですか、私はそれがworそれなしの王。 コンテンツに何らかの
が含まれている場合はどうなりますか?新しいP-タグで、このテキストを選択し、それをラップする方法 '

新しいライン
新しいline' 私は' jQueryの( 'b.pageタイトル')nextUntil( ':ありません(BR)')を使用。上記のコードの前に、最初の行だけを折り返してください。 –

+0

@AmitShah:__1)jQueryオブジェクトからdomオブジェクトを取得するための__ '[0]' __2)__答えを更新してください –

1

、あなたはこれを試すことができます。

var contents = $('b.page-title').contents(), 
    textNodes = contents.filter(function() { return this.nodeType === 3; }); 

console.log(textNodes[0].textContent); 

[0] contents()

関連する問題