Question

我正在尝试找到与我点击的div接近的跨度文本。现在，我在console.log中什么也没得到。

HTML：

<div class="section group">
        <div class="col2 span_1_of_2 photo">
            <img class="person" src="img/mobile/Bill.jpg" />
        </div>
        <div class="col2 span_1_of_2 details last">
            <div class="quote">&quot;When in the course of human events...&quot;</div>
            <div class="attribution"><span class="person_name">Bill</span>, <span class="person_age">89</span> <span class="person_where"></span></div>
        </div>
</div>

jquery的：

$('.person').on('click', function() {
        //get name
        var person_name = $(this).closest('.person_name').text();
        console.log(person_name); //returns nothing
});

我之前没有看到过这个问题。有谁知道我做错了什么，拜托？

Answer 1

.closest()遍历 up DOM，.person-name是兄弟元素的后代。而是使用：

var person_name = $(this).parent().next().find('.person_name').text();

$('.person').on('click', function() {
  //get name
  var person_name = $(this).parent().next().find('.person_name').text();
  console.log(person_name); //returns nothing
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section group">
  <div class="col2 span_1_of_2 photo">
    <img class="person" src="img/mobile/Bill.jpg" />
  </div>
  <div class="col2 span_1_of_2 details last">
    <div class="quote">&quot;When in the course of human events...&quot;</div>
    <div class="attribution"><span class="person_name">Bill</span>, <span class="person_age">89</span>  <span class="person_where"></span>
    </div>
  </div>
</div>

Answer 2

$('.person').on('click', function() {
        //get name
        var person_name=$(this).closest('div').siblings('.details').find('.person_name').text();
        console.log(person_name);
});

Answer 3

你遇到了遍历问题，你必须上DOM树，然后搜索DOM树。样品：

$('.person').on('click', function() {
    //get name
    var person_name = $(this).parent().next().find('.person_name').text();
    console.log(person_name); //returns Bill
});

jquery查找具有某个类的最近跨度的文本

3 个答案: