JQuery, как получить идентификатор и заголовок

Здравствуйте, у меня есть UL и LI, он работает с функциональным щелчком, но если получить заголовок, он не сработает.

Пример:

// it work but not get title
$("#list li").on('click', function() {

  var get_id = $(this).attr('id');
  var get_title = ///??? how to get title h2 selector
    //alert(get_id);
    console.info($(this).text());
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
<ul id = "list">

  <li id = "myID">
    <h2>Title</h2> First One </li>
  <li id = "myID2">
    <h2>Title 2</h2> Two </li>
  <li id = "myID4">
    <h3>Title 3</h3> Tree </li>
</ul>

Ни у одного из элементов нет атрибута title? Вы имеете в виду text()?

— 30.05.2018 14:48

И какой выход вы хотите? Title,Title 2,Title 3 или First One,Two,Tree?

— 30.05.2018 14:52

javascript jquery html

30.05.2018 14:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

484

Перейти к ответу Данный вопрос помечен как решенный

Ответы 7

Ответ принят как подходящий

Вам нужно выбрать элемент h2, а затем получить текст с помощью text(), например:

var get_title = $(this).find('h2').text();

Как предложил @ParthShah, вы можете использовать глобальный класс, например title_content, в ваших элементах заголовка, чтобы вы могли легко настроить его с помощью селектора классов:

  var get_title = $(this).find('.title_content').text();

$("#list li").on('click', function() {
  var get_id = $(this).attr('id');
  var get_title = $(this).find('.title_content').text();

  console.info(get_id + ' - ' + get_title);
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id = "list">
  <li id = "myID"><h2 class = "title_content">Title</h2> First One </li>
  <li id = "myID2"><h2 class = "title_content">Title 2</h2> Two </li>
  <li id = "myID4"><h3 class = "title_content">Title 3</h3> Tree </li>
</ul>

А как насчет h3?

— 30.05.2018 14:51

присвойте классу "title_content" тегам h2 и h3, а затем выберите заголовок по имени класса.

— 30.05.2018 14:52

Просто используйте children ()

— 30.05.2018 14:55

Общие классы более эффективны, если у них есть вложенная структура, при использовании children() его будет не хватать ...

— 30.05.2018 14:56

30.05.2018 14:50

используйте jQuery find для запроса внутри вашего элемента.

var get_title = $(this).find("h2,h3").text() //add h4,h5 etc if you need to find those too.

30.05.2018 14:52

https://jsfiddle.net/povu503s/

$(this).children().html();

Возьмем первого ребенка и возьмем HTML внутри

30.05.2018 14:54

Используйте :header. Не нужно беспокоиться ни о каком теге h1,h2,h3....

$("#list li").on('click', function() {
  var get_id = $(this).attr('id');
  var get_title = $(this).find(":header").text();
   console.info(get_title);
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id = "list">

  <li id = "myID">
    <h2>Title</h2> First One </li>
  <li id = "myID2">
    <h2>Title 2</h2> Two </li>
  <li id = "myID4">
    <h3>Title 3</h3> Tree </li>
</ul>
</div>

30.05.2018 14:55

Название является дочерним по отношению к вашему целевому li. Используйте функцию .children() для нацеливания на этот заголовок.

Надеюсь, это поможет:>

// it work but not get title
$("#list li").on('click',function(){
  var get_id = $(this).attr('id');
  var get_title = $(this).children().text();
  alert(get_title)
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id = "list" >
<li id = "myID" > <h2>Title</h2> First One </li>
<li id = "myID2" > <h2>Title 2</h2> Two </li>
<li id = "myID4" > <h3>Title 3</h3> Tree </li>
</ul>

30.05.2018 14:57

присвойте тегам h2 и h3 такой класс, как "title_content", а затем выберите заголовок по имени класса.

$("#list li").on('click', function() {
  var get_id = $(this).attr('id');
  var get_title = $(".title_content", this).text();
  console.info(get_id + ' - ' + get_title);
});

30.05.2018 14:57

См. Ниже Fiddle ..

Скрипка

Вы можете использовать любой из нижеприведенных

 1. var get_title = $(this).find(':header').text();
 2. var get_title = $(this).children().text();

30.05.2018 15:00

Другие вопросы по теме

Как остановить несколько запущенных функций событий мыши

Эквивалент представления возврата ('path', compact ('data1', 'data2', 'data3')) laravel в успехе ajax

Всегда показывать список автозаполнения, даже если поиск не соответствует

Перетащите изображение на несколько удаляемых div с тем же классом

Изменить порядок перехода CSS

Изображение Slick-Slider внутри контейнера div не изменяет размер окна на основе размера

Как правильно добавить данные JSON после других данных JSON с помощью Javascript / jQuery

$ .extend не является функцией с React SSR

JQuery дождитесь, пока вызов Ajax получит данные перед отображением

Window.showModalDialog в диалоговом окне jquery

JQuery, как получить идентификатор и заголовок

Ответы 7

Другие вопросы по теме

Похожие вопросы