Блог

Главная - Вопросы по программированию - jquery находит текст ближайшего диапазона с определенным классом

jquery находит текст ближайшего диапазона с определенным классом

#jquery #html

#jquery #HTML

Вопрос:

Я пытаюсь найти текст диапазона, который близок к 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">amp;quot;When in the course of human events...amp;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
});

Я раньше не видел именно этого вопроса. Кто-нибудь знает, что я делаю не так, пожалуйста?

Ответ №1:

.closest() проходит вверх по 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">amp;quot;When in the course of human events...amp;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>

Комментарии:

1. Это было близко, но не совсем так. Но вы были правы — я должен был перейти к родительскому.

2. Извините, @j08691 — у меня есть две версии этого кода, и я использовал неправильную для проверки вашего ответа.

Ответ №2:

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

Ответ №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
});

Комментарии:

1. Чем ваш ответ принципиально отличается от моего, который был отправлен получасом ранее?

2. Когда я отвечал на этот вопрос, не было зафиксированных ответов, к тому времени, когда я нажал кнопку отправки, он обновился с 3 ответами и увидел, что у нас было то же самое решение, и я бы сказал, что прошло пару минут, я просто тестировал код, поэтому я не предоставляю некоторые ошибочные ответы