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

你可以这样做：

在这里，我们抓住当前点击div的课程show的父span，然后在课程span中查找内部cIdClass标记并阅读文本。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

跨度的

onclick事件使用text()方法检索其文本，然后使用div获取它的父parent()，最后找到find()的兄弟范围1}}使用其类名的方法。找到兄弟姐妹后，将检索到的文本设置为文本。

＆＃13;

$(".clickClass").click(function(){
  var text=$(this).text();
  $sibspan=$(this).parent().find('.cIdClass');
  $sibspan.text(text);
  $sibspan.show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

＆＃13;

Answer 3

你可以做到

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

单击另一个时获取兄弟div的内容

3 个答案: