如何通过单击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()。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>