Question

我在ul中有一个HTML列表，我很难获得inner元素的li文本。我将简化一些示例，以便易于理解我要做的事情。我有以下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中创建了一个click方法，当单击列表项时会触发该方法：

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

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

4 个答案: