如何通过单击那些包裹在div中的锚标签来获取跨度数据？

Question

我已经使用jQuery创建了一个动态div 。 该div将包装两个元素1.是<span> 2.是<a>代码如下：

 $("div").delegate(".dateEdit", "click", function(e){ e.preventDefault(); alert(this.id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class= "specific"> <span id= "0">some data of 1</span> <a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal"> button </a> </div> </div> <div class="content"> <div class= "specific"> <span id= "1">some data of 2</span> <a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal"> button </a> </div> </div> <div class="content"> <div class= "specific"> <span id= "3">some data</span> <a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal"> button </a> </div> </div> 

我将如何通过单击特定跨度的锚标记来获取特定跨度的文本，以及如何仅使用此div一次不使用$('.specific')来显示警报框。 谢谢。

Answer 1

您可以尝试$(this).prev('span') 。

请注意： on()语法是jQuery 1.7中的新语法，它旨在替代bind() ， delegate()和live() 。

 $("body").on("click", ".dateEdit", function(e){ //e.preventDefault(); alert($(this).prev('span').text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class= "specific"> <span id= "0">some data of 1</span> <a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal"> button </a> </div> </div> <div class="content"> <div class= "specific"> <span id= "1">some data of 2</span> <a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal"> button </a> </div> </div> <div class="content"> <div class= "specific"> <span id= "3">some data</span> <a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal"> button </a> </div> </div> 

Answer 2

获取最接近的div并找到该div中的跨度并获取该跨度的文本。

 $("div .dateEdit").click(function(e){ var spanData = $(this).closest('.specific').find('span').text(); console.log(spanData); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class= "specific"> <span id= "0">some data of 1</span> <a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal"> button </a> </div> </div> <div class="content"> <div class= "specific"> <span id= "1">some data of 2</span> <a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal"> button </a> </div> </div> <div class="content"> <div class= "specific"> <span id= "3">some data</span> <a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal"> button </a> </div> </div>