Get span text Jquery

Question

我正在尝试使用jquery从下面的结构中检索一个span text -cnn.com。

var txt = $(".example1 >.myNewTest").closest('.subexample2').find('span').text();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example1" id="test1">
<div id="wkTest" class="myNewTest">
<h2 class="subexample2">
<span class="moreTest></span>
<span>cnn.com</span>---->I need this.
<span>/</span>
<span>News</span>
</h2>
</div>
</div>

Answer 1

如果您没有为元素添加类名或ID的选项，您可以尝试下面这个。+选择器直接针对同级元素。

var txt = $(".example1 >.myNewTest > .subexample2 > .moreTest + span").text();

好吧，如果你可以添加一个类，那么它会简单得多，检查下面的代码。Website是用于定位元素的类名。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example1" id="test1">
<div id="wkTest" class="myNewTest">
<h2 class="subexample2">
<span class="moreTest"></span>
<span class="website">cnn.com</span>
<span>/</span>
<span>News</span>
</h2>
</div>
</div>
var txt = $(".example1 .website").text();

Answer 2

由于您有多个span元素，因此区分它们的一个好方法是为您想要检索的span添加一个id。这样做之后，使用. innerhtml很容易检索文本。

var cnn = $('#cnn')[0].innerHTML
console.log(cnn)

<div class="example1" id="test1">
<div id="wkTest" class="myNewTest">
<h2 class="subexample2">
<span class="moreTest"></span>
<span id="cnn">cnn.com</span>
<span>/</span>
<span>News</span>
</h2>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

如果您想要的文本的span始终是类为subexample2的元素的第二个子元素，您可以使用:

const txt = $('.example1 > .myNewTest > .subexample2 > span:eq(1)').text()

const txt = $('.example1 > .myNewTest > .subexample2 > span:eq(1)').text()
$('#result').val(txt)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example1" id="test1">
<div id="wkTest" class="myNewTest">
<h2 class="subexample2">
<span class="moreTest"></span>
<span>cnn.com</span>
<span>/</span>
<span>News</span>
</h2>
</div>
</div>
<input type="text" id="result">