问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js 怎么仅获取父元素的值而不要连子元素的值同时获取？

头像
baiyygynui888
    85822143196
    <div 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>
</div>

    仅要获取 Trouble Ticket 怎么写？谢谢

    javascriptjquery
    阅读 5.7k
    10 个回答
    得票最新
    头像
    baiyygynui888
      85822143196
      ✓ 已被采纳
      var val = jQuery(this).find('.js-anviz-body')[0].firstChild.data;

      OK！

      头像
      京都玩家
        1.2k13156

        最好还是加上个标签给包住，方便获取

        头像
        张伟伟3x3
          35814

          先clone 元素，然后移除子元素，最后获取的是不包含子元素的文本

          jQuery('.js-anviz-body').clone().children().remove().end().text()
          头像
          Anguer
            5011616
            document.querySelector('.mui-media-body').firstChild.nodeValue
            头像
            boxsnake
              6.8k21249

              这个问题之前我也回答过类似的，这个文本在遍历nodeChild的时候，是Text()的实例，可以参见我之前回答的问题：https://segmentfault.com/q/10...

              头像
              iebu三毛钱
                6252549

                加个span包住比较合理

                头像
                treeandgrass
                  1.3k32343
                  <html>
    <head>
        <title></title>
        <style type="text/css">
            .parent{
                width:100px;
                height:100px;
            }
            .child{
                width:100px;
                height:50px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            hello world,
            <div class="child">welcome!</div>
        </div>
        <script>
            var text = document.querySelector('.parent').firstChild.nodeValue;
            console.log(text);
        </script>
    </body>
</html>

                  clipboard.png

                  头像
                  chenjsh36
                    7371613

                    题主的问题理解起来应该是想获取属于父元素但不属于子元素的所有文本吧

                    • 假设知道文本位置，那就简单些，如果文本在一开始：

                    //pp = """<div 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>
</div>"""
var childNodes = pp.childNodes;
var text = childNodes[0]; // Trouble Ticket

                    • 如果文本位置不确定，甚至有多个的时候，这个时候就要遍历父元素的儿子元素，寻找所有节点属性为文本的元素：

                    //pp = """<div 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
</div>"""
var childNodes = pp.childNodes;
var textNodes = [];
childNodes.forEach(function(node){
    if (node.nodeType === 3) {
        textNodes.push(node);
    } // 3 为 文本
});
//textNodes === ['Trouble Ticket', 'Trouble Ticket2']
                    头像
                    yunkehe
                      60321931

                      上面clone的方法好一点，万一p标签后面还有文本呢？
                      用firstChild只取到了第一个文本节点，还要遍历才能取到后面的文本节点。

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

                        html代码：

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

                        js代码：

                        
    <script>
        var content = $('.anviz-ellipsis').parent().html().replace(/<[\s\S]*>/g, '');
        console.log(content);
    </script>
                        撰写回答
                        你尚未登录，登录后可以
                        • 和开发者交流问题的细节
                        • 关注并接收问题和回答的更新提醒
                        • 参与内容的编辑和改进，让解决方法与时俱进
                        推荐问题