javascript - 单击另一个时获取同级 div 的内容

Question

我有一个类似这样的 html 结构:

<div id="result1" class="show ">
  <span id="sibA1" class="clickClass">a1</span>
  <br/>
  <span id="sibA2" class="cIdClass" style="display:none">a2</span>
</div>

<div id="result2" class="show ">
  <span id="sibB1" class="clickClass">b1</span>
  <br/>
  <span id="sibB2" class="cIdClass" style="display:none">b2</span>
</div>

<div id="result3" class="show ">
  <span id="sibC1" class="clickClass">c1</span>
  <br/>
  <span id="sibC2" class="cIdClass" style="display:none">c2</span>
</div>

我想做的是，当用户点击具有 clickClass 的跨度时，我必须获取位于附近的 cIdClass 跨度内的文本

$(".clickClass").live("click", function(e) {
  var $clicked = $(e.target);
  var $name = $clicked.html();
  var decoded = $("<div/>").html($name).text();
  console.log("test: " + $(this).siblings(".cIdClass").eq(0).text());
});

我的 jquery 版本是 1.10.2，这段代码不会产生任何结果。

Answer 1

你可以这样做:

这里我们获取当前点击的 span 类 show 的父 div，然后寻找内部 span 使用类 cIdClass 标记并读取其文本。

$(document).ready(function() {

  $(".clickClass").on("click", function(e) {
    var $clicked = $(this);
    var text = $clicked.closest(".show").find(".cIdClass").text();
    alert(text);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="result1" class="show ">
  <span id="sibA1" class="clickClass">a1</span>
  <br/>
  <span id="sibA2" class="cIdClass" style="display:none">a2</span>
</div>

<div id="result2" class="show ">
  <span id="sibB1" class="clickClass">b1</span>
  <br/>
  <span id="sibB2" class="cIdClass" style="display:none">b2</span>
</div>

<div id="result3" class="show ">
  <span id="sibC1" class="clickClass">c1</span>
  <br/>
  <span id="sibC2" class="cIdClass" style="display:none">c2</span>
</div>