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

Get value of a h4 selector inside multiple selectors in javascript

本文关键字：选择器 获取 h4 javascript      更新时间：2023-09-26

我在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？

您可以使用

$('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()

尝试使用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>

您可以使用此

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

您可以尝试这种最简单的方法：

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

您的最终输出

相关文章：