javascript - 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

nextjQuery 函数获取下一个元素。你想要一个文本节点。你需要使用普通的 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);
});

演示小提琴

Answer 3

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


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