JQuery селектор, чтобы выбрать текст непосредственно к тегу img?

0

У меня есть следующий 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());
});
  • 4
    На заметку вы должны переосмыслить эти идентификаторы.
  • 1
    ЮПП! Мало того, что они включают пробелы (которые могут даже быть разрешены), они даже не уникальны (что они должны быть). И похоже, что они просто хранилище для чего-то, что на самом деле не является целью атрибута ID ...
Показать ещё 3 комментария
Теги:

3 ответа

2
Лучший ответ

Вы заявили об этом. For example in the first <p> tag я should get "Politics",

Вы можете получить его с помощью .nextSibling.nodeValue:

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

Демо-скрипт

Поделиться
  • 0
    это дает текст в виде строки. если нужна не строка, а текстовый узел, избавьтесь от nodeValue . Приятно иметь ответы на оба вопроса сейчас! (хорошо, одинокий день улучшил свой ответ, теперь один включает оба)
  • 1
    @JohannesH For example in the first <p> tag I should get "Politics", я думаю, это то, что я пытался показать.
Показать ещё 5 комментариев
5

next функция jQuery получает следующий элемент. Вам нужен текстовый узел. Для этого вам необходимо использовать обычные методы обхода DOM: вам нужно свойство nextSibling.

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

Вероятно, вы действительно хотите его строковое значение, для которого вы можете использовать nodeValue:

$("img.bookmark").click(function(){
   console.log(this.nextSibling.nodeValue);
});
Поделиться
  • 0
    this.nextSibling.value возвращает весь innerHTML тега p, но я хочу выделить текст после этого тега img.
  • 0
    @VijinPaulraj Я не могу повторить это.
Показать ещё 4 комментария
1 
*nextSibling.data* will give you the text (in your case Politics/../..)


$("img.bookmark").click(function(){
   alert(this.nextSibling.data);
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню