简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js How to get only the value of the parent element instead of the value of the child element at the same time?
黄舟
黄舟 2017-06-26 10:50:49
0
10
774
<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>

Only to get Trouble Ticket How to write? Thanks

黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

reply all(10)
某草草
某草草2017-06-26 10:52:49 10 floor

It’s best to add a label to wrap it up for easy access

Like +0
Add Reply
洪涛
洪涛2017-06-26 10:52:49 9 floor 
var val = jQuery(this).find('.js-anviz-body')[0].firstChild.data;

OK！

Like +0
Add Reply
習慣沉默
習慣沉默2017-06-26 10:52:49 8 floor

First clone the element, then remove the child elements, and finally get the text without child elements

jQuery('.js-anviz-body').clone().children().remove().end().text()
Like +0
Add Reply
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-26 10:52:49 7 floor 
document.querySelector('.mui-media-body').firstChild.nodeValue
Like +0
Add Reply
我想大声告诉你
我想大声告诉你2017-06-26 10:52:49 6 floor

I have answered a similar question before. When traversing nodeChild, this text is an instance of Text(). You can refer to the question I answered before: /q/10...

Like +0
Add Reply
过去多啦不再A梦
过去多啦不再A梦2017-06-26 10:52:49 5 floor

It is more reasonable to add a span to cover it

Like +0
Add Reply
大家讲道理
大家讲道理2017-06-26 10:52:49 4 floor 
<html>
    <head>
        <title></title>
        <style type="text/css">
            .parent{
                width:100px;
                height:100px;
            }
            .child{
                width:100px;
                height:50px;
            }
        </style>
    </head>
    <body>
        <p class="parent">
            hello world,
            <p class="child">welcome!</p>
        </p>
        <script>
            var text = document.querySelector('.parent').firstChild.nodeValue;
            console.log(text);
        </script>
    </body>
</html>

Like +0
Add Reply
曾经蜡笔没有小新
曾经蜡笔没有小新2017-06-26 10:52:49 3 floor

To understand the question, you probably want to get all the text that belongs to the parent element but not the child element

  • Assuming you know the text position, it's simpler, if the text is at the beginning: 

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

  • If the text position is uncertain, or even there are multiple, it is necessary to traverse the child elements of the parent element at this time and find all elements whose node attributes are text: 

//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']
Like +0
Add Reply
ringa_lee
ringa_lee2017-06-26 10:52:49 2 floor

The clone method above is better. What if there is text behind the p tag?
Using firstChild only gets the first text node, and it needs to be traversed to get the subsequent text nodes.

Like +0
Add Reply
大家讲道理
大家讲道理2017-06-26 10:52:49 1 floor 
var content = $('.anviz-ellipsis').parent().html().replace(/<[\s\S]*>/g, '');
    console.log(content);
打印结果：
// Trouble Ticket

html code: 

    <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 code: 


    <script>
        var content = $('.anviz-ellipsis').parent().html().replace(/<[\s\S]*>/g, '');
        console.log(content);
    </script>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！