javascript - jquery如何获取ID和Title

Question

你好，我有一个 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.log($(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>

Answer 1

您需要选择 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.log(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>