使用jQuery获取span元素后面的文本，不包括在span之前的文本。

Question

我有这段HTML代码：

<div>
    <span>
        First text
        <span class="dot"></span>
        Second text
    </span>
    <span class="other-span">
    </span>
</div>

我需要仅获取“第二个文本”。 我尝试了这个JQuery代码：

const a = $('div').find('span:nth-child(1)').text();
console.log(a);

上述 jQuery 代码的输出结果如下：

First text  Second text

如何才能仅获取带有class为dot的元素后的第二个文本

- Nicki Evans

---

可能是使用jQuery获取span元素后的文本的重复问题。 - Xzandro

将“second text”放置在span标签内，然后尝试。 - vinay kumar reddy

@Xzandro 不是的，这有些不同，提到的问题的解决方案只是检查文本类型，但如果我在这里使用它，它会返回第一段文字和第二段文字。 - Nicki Evans

@vinaykumarreddy 我无法修改 html 代码。 - Nicki Evans

const a = $('div span').contents().eq(2).text(); 这段代码有点不同，但基本思路是一样的。 - Xzandro

Answer 1

你可以获取HTML，然后像这样剥离文本：

const a = $('div').find('span:nth-child(1)').html().split('<span class="dot"></span>')[1];
console.log(a.trim());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>
        First text
        <span class="dot"></span> Second text
  </span>
  <span class="other-span">
    </span>
</div>

- Zakaria Acharki

---

非常感谢您！！ - Nicki Evans

Answer 2

你可以使用nodeType属性。我希望下面的例子能够帮助您，

const a = $('div').find('span:nth-child(1)').contents().filter(function() {
  return this.nodeType == 3;
})[1]
console.log(a.textContent.trim());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>
        First text
        <span class="dot"></span> Second text
  </span>
  <span class="other-span">
    </span>
</div>

- Jitendra G2

---

非常感谢您提供的解决方案，但由于某些原因，对我来说.textContent返回未定义:( - Nicki Evans

@DashaRee 好的。你检查了上面的代码片段吗？它正常工作了吗？ - Jitendra G2