jQuery选择器直接选择img标签的文本？

Question

我正在使用以下html代码并尝试在单击相应的img标记时选择与img标记直接相关的文本。

例如，在第一个<p>标记中，我应该获得“政治”，

 <p>Environmental<img src="/img/bookmark.png" class="bookmark" id="bm1" data-username="usernames" data-userid="un123"> Politics</p>

 <p>Science<img src="/img/bookmark.png" class="bookmark" id="bm2" data-username="usernames" data-userid="un123"> Explore</p>

 <p>Contextual<img src="/img/bookmark.png" class="bookmark" id="bm3" data-username="usernames" data-userid="un123"> Learning</p>

我使用了以下jQuery函数，但没有任何帮助。

$("img.bookmark").click(function(){
   console.log($(this).next());
});

Answer 1

next jQuery函数获取下一个元素。你想要一个文本节点。您需要使用常规DOM遍历方法来实现此目的：您需要nextSibling属性。

$("img.bookmark").click(function(){
   console.log(this.nextSibling);
});

您可能真的想要它的字符串值，您可以使用nodeValue：

$("img.bookmark").click(function(){
   console.log(this.nextSibling.nodeValue);
});

Answer 2

您说明了 For example in the first <p> tag I should get "Politics",

您可以使用.nextSibling.nodeValue：

来获取它

$("img.bookmark").click(function(){
   console.log(this.nextSibling.nodeValue);
});

Demo Fiddle

Answer 3

*nextSibling.data* will give you the text (in your case Politics/../..)


$("img.bookmark").click(function(){
   alert(this.nextSibling.data);
});