0

Есть такой код:

<div class="item">
  <div class="name">Ivan</div>
  <div class="last_name">Ivanov</div>
  <div class="age">25</div>

  <button class="get">Get info</button>
</div>

<div class="item">
  <div class="name">Vladimir</div>
  <div class="last_name">Sidorov</div>
  <div class="age">36</div>

  <button class="get">Get info</button>
</div>

<div class="item">
  <div class="name">Maria</div>
  <div class="last_name">
    Sidorova
    <div class="maiden_name">Ivanova</div>
  </div>
  <div class="age">35</div>

  <button class="get">Get info</button>
</div>
...

Необходимо при клике на кнопку "Get info", получить имя, фамилию, девичью фамилию (maiden_name), возраст в текущем div'е (item). Как это сделать при помощь JQuery?

1
  • 1
    сами пробовали что-нибудь?
    – Grundy
    8 фев 2016 в 6:35

2 ответа 2

1

обходим циклом все блоки, находим в них кнопки и присваиваем клик, в котором получаем информацию из этого блока, для last_name получаем текст из первой текстовой ноды, для остальных напрямую через text()

   $(function() {
     $(".item").each(function(indx, el) {
       $(".get", el).click(function() {
         var name = $(".name", el).text(),
           last_name = $.trim($(".last_name", el).contents().eq(0).text()),
           age = $(".age", el).text(),
           maiden_name = $(".maiden_name", el).text(),
           res = [name, last_name, age];
         maiden_name && res.push(maiden_name)
         alert(res)

       })

     });
   })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item">
  <div class="name">Ivan</div>
  <div class="last_name">Ivanov</div>
  <div class="age">25</div>

  <button class="get">Get info</button>
</div>

<div class="item">
  <div class="name">Vladimir</div>
  <div class="last_name">Sidorov</div>
  <div class="age">36</div>

  <button class="get">Get info</button>
</div>

<div class="item">
  <div class="name">Maria</div>
  <div class="last_name">
    Sidorova
    <div class="maiden_name">Ivanova</div>
  </div>
  <div class="age">35</div>

  <button class="get">Get info</button>
</div>

3
  • Приводить код решения, это конечно хорошо, но стоит пояснять что именно происходит в коде
    – Grundy
    8 фев 2016 в 7:27
  • @Grundy добавил описание, так понятнее стало?
    – рони
    8 фев 2016 в 7:33
  • Определенно лучше чем было :)
    – Grundy
    8 фев 2016 в 7:34
1

Событие клика на кнопку, думаю знаете как вешать?

теперь в событии получаем родительский элемент кнопки

var parent = $( "button.get" ).parent()

Ну а после не составит особого труда в родительском элементе найти дочерние элементы с фамилией и именем

$( parent ).find( "div.name" )
$( parent ).find( "div.last_name" )

Значение из DIV вытягиваются командой html()

$(last_name).html()
3
  • сделал вот так: jsfiddle.net/zb4dL4fe . Почему не работает?
    – XenK
    8 фев 2016 в 7:28
  • @XenK, потому что всех сразу выбираете
    – Grundy
    8 фев 2016 в 7:29
  • 1
    var parent = $( "button.get" ).parent() получает родителей всех кнопок а не конкретно той которую нажали
    – Grundy
    8 фев 2016 в 7:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.