如何使用 jquery 选择某些文本节点？

Question

我正在尝试使用 ajax 从网站获取一些数据。

这是我使用 ajax POST 方法的代码：

$(data).find('.col-md-9 .panel:lt(5)').each(function () { console.log($(this).find('.panel-body .sp-card td:eq(1) center ').text());

控制台：

麦克战争网络 IP：mc-wars.org 投票 - 服务器信息 网站

我只想得到第一行：Mc-Wars Network

请帮忙！

这是我正在抓取的 html 代码的图像。

这是抓取后的控制台图像。 （我只需要第一行。

这是我正在抓取的网站上的代码：

<div onclick="location.href='//www.serverpact.com/vote-20129 ';" class="panel panel-default sp-plane">
                        <div class="ribbon ribbon-small ribbon-blue">
                            <div class="banner">
                                <div style="font-size: 14px;text-align: center;" class="text">#1</div>
                            </div>
                        </div>
                        <div style="padding: 5px;" class="panel-body">
                            <table class="sp-card">
                                <tbody><tr>
                                    <td style="font-weight: bold;vertical-align: middle;"><center><i class="fa fa-thumbs-up"></i><br>8384<br><br>#1</center></td>
                                    <td style="font-weight: bold;vertical-align: middle;">
                                        <center>
                                        Mc-Wars Network<br>
                                        <b>IP: mc-wars.org<br>
                                        <a style="margin-top: 5px;" class="btn btn-primary btn-sm" href="//www.serverpact.com/vote-20129 ">Vote - Server info</a> 
                                        <a style="margin-top: 5px;" class="btn btn-success btn-sm" href="http://mc-wars.org">Website</a>
                                        </b></center>
                                    </td>
                                    <td width="500px" class="hidden-xs">
                                    <a href="http://mc-wars.org" target="_blank"><img style="margin-top: 7px;margin-bottom: 3px;border-radius: 4px;" src="http://www.serverpact.com/b/20129.gif" alt="Mc-Wars Network" class="img-responsive hidden-xs"></a>
                                        <span style="font-size: 13px;">
                                            McWars is a minecraft pvp based server where you will have to build a fortress for your team and destroy the other teams base to win. With more than 10 different classes to choose, youll love it.
                                        </span>            
                                    </td>
                                </tr>
                            </tbody></table>
                        </div>
                    </div>

Answer 1

可能 text() 结合了所有子文本节点。

您需要的可能是将文本节点检索为 nodes 然后获取它们的内容。以See this post 为例。

Answer 2

这是一个 sn-p，我将 td 中的 center 的子节点导航到正确的文本节点。请注意，空格会创建一个子节点，因此例如在 center 节点之前有一个纯空格文本节点（在这种情况下并不重要，但您应该注意这一点）。

document.write('here you go:' + $('#firstDiv td:nth-child(2) center')[0].childNodes[0].textContent)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstDiv">
        <table id="coolTable">
           <tbody>
           <tr>
              <td>
              </td>
              <td>
                    <center>
                       The text I need!
                    <br>
                    <b>
                    The text I dont need!
                    </b>
                    </center>
             </td>
            </tr>
            </tbody>
         </table>
    </div>

另请参阅：MDN: Whitespace in the DOM

Answer 3

有办法做到这一点：

$(data).find('#firstDiv #coolTable').each(function () {
console.log($.trim($(this).find('tbody tr td:eq(1) center').contents()[0].nodeValue))});

Answer 4

好的，您的问题发生了很大变化！
在你的 .text() 末尾添加这将完成这项工作：

.match(/[^\n]+/g)[0]

请注意，可以通过更改索引来捕获所有行，其中“0”是第一行，“1”是第二行，依次为。