Question

当我点击“按我”跨栏文字时，我需要获得“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/

Answer 1

通过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() );
  }

});

最好拥有该类，以便您可以移动目标，代码仍然有效。

Answer 2

试试这个。

如果你想得到＆＃34; fold2＆＃34;文字，您可以单独为click设置span.trashcan个事件。在此click事件中，您可以使用prev("span")获得该值。

＆＃13;

// 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);
  });
});

＆＃13;

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

＆＃13;

希望你期待这个...

Answer 3

请像这样使用:(已测试）

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

Answer 4

我添加了一个文本类 - 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"
    });
});

单击特定元素时如何查找文本（）？

4 个答案: