javascript - js 怎麼只取得父元素的值而不要連子元素的值同時取得？

Question

<p class="mui-media-body js-media-body js-anviz-body">Trouble Ticket
    <p class="anviz-ellipsis js-des">You can sumbit your trouble and …</p>
</p>

只取得 Trouble Ticket 怎麼寫？謝謝

Answer 1

最好還是加上個標籤給包住，方便取得

Answer 2

雷雷

好的！

Answer 3

先clone 元素，然後移除子元素，最後取得的是不包含子元素的文字

jQuery('.js-anviz-body').clone().children().remove().end().text()

Answer 4

雷雷

Answer 5

這個問題之前我也回答過類似的，這個文本在遍歷nodeChild的時候，是Text()的實例，可以參見我之前回答的問題：/q/10...

Answer 6

加個span包住比較合理

Answer 7

雷雷

Answer 8

題主的問題理解起來應該是想取得所有屬於父元素但不屬於子元素的文字

• 假設知道文字位置，那就簡單些，如果文字在一開始：

//pp = """<p class="mui-media-body js-media-body js-anviz-body">Trouble Ticket
    <p class="anviz-ellipsis js-des">You can sumbit your trouble and …</p>
</p>"""
var childNodes = pp.childNodes;
var text = childNodes[0]; // Trouble Ticket

• 如果文字位置不確定，甚至有多個的時候，這個時候就要遍歷父元素的兒子元素，尋找所有節點屬性為文本的元素：

//pp = """<p class="mui-media-body js-media-body js-anviz-body">
    Trouble Ticket
    <p class="anviz-ellipsis js-des">You can sumbit your trouble and …</p>
    Trouble Ticket2
</p>"""
var childNodes = pp.childNodes;
var textNodes = [];
childNodes.forEach(function(node){
    if (node.nodeType === 3) {
        textNodes.push(node);
    } // 3 为 文本
});
//textNodes === ['Trouble Ticket', 'Trouble Ticket2']

Answer 9

上面clone的方法好一點，萬一p標籤後面還有文字呢？
用firstChild只取了第一個文字節點，還要遍歷才能取到後面的文字節點。

Answer 10

var content = $('.anviz-ellipsis').parent().html().replace(/<[\s\S]*>/g, '');
    console.log(content);
打印结果：
// Trouble Ticket

html代碼：

    <p class="mui-media-body js-media-body js-anviz-body">Trouble Ticket 
        <p class="anviz-ellipsis js-des">
            You can sumbit your trouble and …
            <!-- 混淆代码1 start-->
            <p>sdkfjfjfdlkfjsld</p>
                <a href="">3w33333</a>
            <!-- 混淆代码1 end-->
        </p>
             <!-- 混淆代码2 start-->
            <img src="" alt="">
            <a href="">sdfsjflsjdflskdjf</a>
            <p>
            </p>
             <!-- 混淆代码2 end-->
    </p>

js程式碼：

    <script>
        var content = $('.anviz-ellipsis').parent().html().replace(/<[\s\S]*>/g, '');
        console.log(content);
    </script>