Получить значение рядом стоящего тега

225

07 марта 2018, 06:48

Всем привет есть такая верстка

<a style="cursor: pointer;" class="order_other c-block cb-1 d-flex col-12 col-md-auto p-0">
  <span class="c-img d-flex justify-content-center align-items-center">
<img src="img/c1.png" alt="">
<img class="an" src="img/cc1.png" alt="">
</span>
  <p class="d-flex justify-content-center align-items-center">Авиа и ж/д билеты</p>
</a>

Таких куча ссылок. У всех разные

<p class="d-flex justify-content-center align-items-center">Авиа и ж/д билеты</p>

Но одинаковые <a style="cursor: pointer;" class="order_other c-block cb-1 d-flex col-12 col-md-auto p-0">

Как при нажатии на ссылку получить значения p

Answer 1

$(".order_other").click(function(e){
  e.preventDefault();
  console.log($(this).find("p").text());
});

Answer 2

const a = document.querySelectorAll('.a'); 
const p = document.querySelectorAll('.a > .p'); 
for (let i = 0; i < p.length; i++) { 
  a[i].addEventListener('click', function(e) { 
    e.preventDefault(); 
    console.log(p[i].innerHTML) 
  }) 
}

a { 
  display: block; 
  width: 200px; 
  height: 30px; 
  cursor: pointer; 
  background: gray; 
}

<a class="a"> 
  <p class="p">Авиа и ж/д билеты</p> 
</a> 
 
<a class="a"> 
  <p class="p">Что-то еще</p> 
</a> 
 
<a class="a"> 
  <p class="p">И еще немного другого</p> 
</a>

Answer 3

$(document).on('click', ".order_other", function (e) { 
  e.preventDefault() 
  console.log($(this).find("p").text()) 
})

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a style="cursor: pointer;" class="order_other c-block cb-1 d-flex col-12 col-md-auto p-0"> 
  <span class="c-img d-flex justify-content-center align-items-center"> 
<img src="img/c1.png" alt=""> 
<img class="an" src="img/cc1.png" alt=""> 
</span> 
  <p class="d-flex justify-content-center align-items-center">Авиа и ж/д билеты</p> 
</a>