特定の要素の後にテキストを取得する（JavaScriptまたはJQuery）

Question

これを行う最良の方法についていくつか指導してもらえますか？

私は、これは単純なことかもしれないけど、それはちょうどクリスマス前に、すべての日私の脳で摘みされています「.main」の後にあるすべてのテキストを取得するために

をしようとしています。だから私は自分自身を強調するのではなく、私はある指導を探すだろうと思った。これはclone()コンテナにある達成するための最も簡単な方法を

は、サンプルコードのみText in P tag戻しますが、私は戻ってText not in it's own elementを持参したいとp tag

console.log($("#container").find(".main").next().text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="main"> WOOP IN MAIN </div> 
 
    Text not in it's own element 
 
    <p> Text in P tag </p> 
 
</div>

Answer 1

Text not in it's own elementは、したがって、next()が、それはHTMLElementだということで、<p/>タグをターゲットとし、textノードと考えられているためです。

const main = document.querySelector('.main'); 
 

 
const txt = [ 
 
    main.nextSibling.textContent.trim(), 
 
    main.nextElementSibling.textContent.trim() 
 
]; 
 

 
console.log(txt)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="main"> WOOP IN MAIN </div> 
 
    Text not in it's own element 
 
    <p> Text in P tag </p> 
 
</div>

：あなたはネイティブに行くとしたら、あなたはそれがメソッドの名前が意味だように、2つのノードタイプと nextElementSiblingのとらわれない nextSiblingの組み合わせを、使用したい、次の兄弟 要素をつかみます

Answer 2

、削除それから.main要素を取得してから、次のようにを取得します。

var text = $("#container").clone().find('.main').remove().end().text(); 
 
console.log(text.trim());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="main"> WOOP IN MAIN </div> 
 
    Text not in it's own element 
 
    <p> Text in P tag </p> 
 
</div>

あなたは、代わりに再帰的.main要素をたどるDOMノードを横断できますが、これははるかに複雑であり、同じ結果を与えます。