当我单击特定元素时如何找到 text(）

How to find the text() when I click on particular element?

本文关键字：何找 text 单击 元素      更新时间：2023-09-26

当我点击"按我"跨度文本时，我需要获取"fold2"text()值。我尝试在我的脚本中添加很多 jquery 遍历方法，但我找不到完美的方法。

因为我<li>包括很多可用的<span>标签。

HTMl 代码： 

<li class="favdelParentFold">
    <a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
       <span class="caret-right"></span>
    </a>
    <span class="folder"></span>
    <span style="color:red;">fold2</span>
    <span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>
    <ul class="collapse in" id="parentLevel1" aria-expanded="true">
    </ul>
</li>

JS代码

// when click on "press me" text I need to get span value of fold2
$(document).ready(function() {
  $(".favdelParentFold span").click(function(){
var tr=$(this).closet().find('a').text();
alert(tr);//Expecting output is "fold2"
});
});

工作代码

https://jsfiddle.net/atg5m6ym/383/

通过jQuery，最简单的方法是（如果由于某种原因真的没有办法将类放在你的目标上）：

$('.trashcan').on('click', function(e) {
  var prev = $(this).prev();
  if (prev.length)
  {
      alert( prev.text() );
  }
});

在这种情况下，仅当目标位于源元素之前时，代码才有效。

另一种方法是，假设您的目标具有一类.target：

$('.trashcan').on('click', function(e) {
  var parent = $(this).closest('.favdelParentFold');
  if (parent.length)
  {
      alert( parent.find('.target').text() );
  }
});

最好有这个类，这样你就可以在目标周围移动，代码仍然可以工作。

请像这样使用它：（ 测试）

$(document).ready(function() {
      $(".favdelParentFold span").click(function(){
    var tr = $(this).prev().text();
    alert(tr);//Expecting output is "fold2"
    });
});

我为文本添加了一个类 - press me文本作为pressMe.请找到工作中的jsfiddle。代码如下：

.HTML 

<li class="favdelParentFold">
        <a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
            <span class="caret-right"></span>
        </a>
        <span class="folder"></span>
        <span style="color:red;">fold2</span>
        <span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan pressMe">press me</span>
        <ul class="collapse in" id="parentLevel1" aria-expanded="true"></ul>
    </li>

.JS

$(document).ready(function () {
    $(".pressMe").click(function () {
        alert($(this).prev().text());//Expecting output is "fold2"
    });
});

试试这个。

如果要获取"fold2"文本，可以单独设置click span.trashcan事件。在此click事件中，您可以使用 prev("span") 获取该值。

// when click on "press me" class i need to get span value of fold2
$(document).ready(function() {
  $(".favdelParentFold > .trashcan").click(function() {
    var tr = $(this).prev('span').text();
    alert(tr);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<li class="favdelParentFold">
  <a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
    <span class="caret-right"></span>
  </a>
  <span class="folder"></span>
  <span style="color:red;">fold2</span>
  <span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>
  <ul class="collapse in" id="parentLevel1" aria-expanded="true">
  </ul>
</li>

希望你期待这个...

相关文章：