首頁  >  問答  >  主體

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

<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 怎麼寫?謝謝

黄舟黄舟2695 天前776

全部回覆(10)我來回復

  • 某草草

    某草草2017-06-26 10:52:49

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

    回覆
    0
  • PHP中文网

    PHP中文网2017-06-26 10:52:49

    雷雷

    好的!

    回覆
    0
  • 習慣沉默

    習慣沉默2017-06-26 10:52:49

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

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

    回覆
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-06-26 10:52:49

    雷雷

    回覆
    0
  • 我想大声告诉你

    我想大声告诉你2017-06-26 10:52:49

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

    回覆
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-26 10:52:49

    加個span包住比較合理

    回覆
    0
  • 大家讲道理

    大家讲道理2017-06-26 10:52:49

    雷雷

    回覆
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-06-26 10:52:49

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

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

    //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']

    回覆
    0
  • ringa_lee

    ringa_lee2017-06-26 10:52:49

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

    回覆
    0
  • 大家讲道理

    大家讲道理2017-06-26 10:52:49

    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>

    回覆
    0
  • 取消回覆