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

问题描述：

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

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

谢谢:)这是最好的答案。去标记它aswer –

@PavelMarian不客气..好运:) –

答

尝试使用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()); 
});

到最终Output

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

相关推荐