Question

你好我有一个UL和LI它正在使用函数点击但是如果得到标题它不起作用。

例：

＆＃13;

// 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());
});

＆＃13;

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

＆＃13;

Answer 1

您需要选择h2元素，然后使用text()获取文字，如：

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

正如@ParthShah建议您可以在标题元素上使用title_content之类的全局类，因此您可以使用类选择器轻松地定位它：

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

＆＃13;

$("#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);
});

＆＃13;

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

＆＃13;

Answer 2

使用:header。无需担心任何h1,h2,h3...标记。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用jQuery的find查询元素。

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

Answer 4

https://jsfiddle.net/povu503s/

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

将抓住第一个孩子并抓住

中的HTML

Answer 5

标题是您定位的li的孩子。使用.children()函数定位该标题。

希望这会有所帮助：＆gt;

＆＃13;

// 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)
});

＆＃13;

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

＆＃13;

Answer 6

给类似＃34; title_content＆＃34;到你的h2和h3标签，然后按类名获取标题。

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

Answer 7

请参阅下面的小提琴..

Fiddle

您可以使用以下任何一种

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

Jquery如何获取ID和标题

7 个答案: