Jquery 单击后选择上一个元素

Question

<div class="container">
 <div class="well">
  <h2>Hurry Up!</h2>
   <ul>
    <li>
     <a onclick="clicked()"></a>
    </li>
    <li>
     <a onclick="clicked()"></a>
    </li>
   </ul>
  </div>
</div>

以上是我的 html 语法示例。我想要实现的是当 "a" 标签被点击时，我想找到 "h2" 元素的文本。

例如，当点击"a"标签时，h2的文本"Hurry Up!"应该显示在控制台中。

我试过了，但没用：

function clicked(){
        var title = $(this).find('h2').text();
        console.log(title);
}

还有这个：

function clicked(){
        var title = $(this).parentsUntil('.container').find('h2').text();
        console.log(title);
}

在控制台中，什么也没有出现，只有一个空行。

我想补充的是我多次使用相同的语法。因此 h2 文本应该属于单击它的容器，因此我正在通过 'this' 尝试它。

Answer 1

试试这个：

<div class="container">
 <div class="well">
  <h2>Hurry Up!</h2>
   <ul>
    <li>
     <a onclick="clicked(this)"></a>
    </li>
    <li>
     <a onclick="clicked(this)"></a>
    </li>
   </ul>
  </div>
</div>

function clicked(elem){
   var text = $(elem).closest('h2').text();
   // text contains Hurry Up! in it
}

Answer 2

试试这个

function clicked(element){
        var title = $(element).closest('div').find('h2').html();
        console.log(title);
        alert(title);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <div class="well">
  <h2>Hurry Up!</h2>
   <ul>
    <li>
     <a onclick="clicked(this)" href="#">Click 1</a>
    </li>
    <li>
     <a onclick="clicked(this)" href="#"> Click 2</a>
    </li>
   </ul>
  </div>
</div>

Answer 3

function clicked(element) {
  var title = $(element).closest('ul').prev('h2').text();
  console.log(title);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <div class="well">
    <h2>Hurry Up!</h2>
    <ul>
      <li>
         <a onclick="clicked(this)">clicked</a>
      </li>
      <li>
        <a onclick="clicked(this)">clicked</a>
      </li>
    </ul>
  </div>
</div>

使用.closest()获取ul然后使用.prev()获取h2

Answer 4

如果您不是在寻找模块化答案，您可以试试这个：

 function clicked(){
    var title = $(".well h2").text();
    console.log(title);
  }

Jquery 单击后选择上一个元素

Jquery Selecting Previous Element After Click

html

jquery

text

parent