在javascript中的多个选择器中获取h4选择器的值

Question

我在HTML中有一个ul列表，我正在努力获得li元素的inner文本。我会稍微简化一下这个例子，以便轻松理解我正在尝试做的事情。 我有以下ul列表中的内容：

<ul id="table-history"> 
    <li class="item"> 
     <div class="item-row"> 
      <h4 class="item-title"> A </h4> 
     </div> 
    </li> 

    <li class="item"> 
     <div class="item-row"> 
      <h4 class="item-title"> B </h4> 
     </div> 
    </li>   

    <li class="item"> 
     <div class="item-row"> 
      <h4 class="item-title"> C </h4> 
     </div> 
    </li> 
</ul> 

我已经创造了javascript中的点击方法是单击列表项时被触发：

$("#table-history > li").on("click", function() { 

     console.log("Clicked"); 
}); 

我怎样才能把里面的文字<h4>元素？有没有办法让我点击连锁elements/views？

Answer 1

可以使用

$('h4.item-title' , this).text() 

$("#table-history > li").on("click", function() { 
 
     
 
     console.log($('h4.item-title' , this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="table-history"> 
 
    <li class="item"> 
 
     <div class="item-row"> 
 
      <h4 class="item-title"> A </h4> 
 
     </div> 
 
    </li> 
 

 
    <li class="item"> 
 
     <div class="item-row"> 
 
      <h4 class="item-title"> B </h4> 
 
     </div> 
 
    </li>   
 

 
    <li class="item"> 
 
     <div class="item-row"> 
 
      <h4 class="item-title"> C </h4> 
 
     </div> 
 
    </li> 
 
</ul>

注：这将是更好地使用.trim()避免空格

$('h4.item-title' , this).text().trim() 

Answer 2

尝试使用text()：

$("#table-history > li").on("click", function() { 
    console.log($(this).text()); 
}); 

例

$(document).on('click', '.item', function() { 
 
    alert($(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul id="table-history"> 
 
    <li class="item"> 
 
     <div class="item-row"> 
 
      <h4 class="item-title"> A </h4> 
 
     </div> 
 
    </li> 
 

 
    <li class="item"> 
 
     <div class="item-row"> 
 
      <h4 class="item-title"> B </h4> 
 
     </div> 
 
    </li>   
 

 
    <li class="item"> 
 
     <div class="item-row"> 
 
      <h4 class="item-title"> C </h4> 
 
     </div> 
 
    </li> 
 
</ul>

Answer 3

您可以使用此

$("#table-history > li").on("click", function() { 

    console.log($(this).find('h4').text()); 
}); 

Answer 4

你可以试试这个简单的方法：

$("#table-history > li").on("click", function() { 
    alert($(this).text().trim()); 
}); 

到最终Output