Дифференцировать HTML <p>с помощью JQuery / JS

Question

Вот моя проблема: у меня есть куча <p>HTML. Например: <p> Paris </p> <p>London</p> <p> NewYork</p>

Когда я хочу получить текст спецификации c <p>, когда я нажимаю на него, я делаю (используя JQuery)

    $("#saved_research").click(function(){
        console.log($(this).text());
    });

возвращает мне ParisLondonNewYork. А не конкретный c текст <p>.

Знаете почему?

С уважением,

Вот точное HTML

Вот точное JS

Answer 1

Похоже, причина, по которой вы получаете весь объединенный текст p, заключается в том, что вы обрабатываете событие click для родительского элемента div, а ссылка this относится к этому элементу div. Вызов .text() для этой родительской ссылки дает весь дочерний текст. Обработчик щелчка должен вызываться с объектом события, у которого есть цель c, и вы можете использовать это, чтобы получить текст только того, что было нажато.

$("#saved_research").click(function(event){
  var x = event.target; // event.target has the exact element clicked
  console.log($(x).text()); // the text of the clicked element
});

Answer 2

Добавьте слушателя к <p> s, а не к родительскому контейнеру, и затем ссылка на this внутри слушателя будет ссылаться на <p>, поэтому $(this).text() даст вам текст отдельного <p> :

$('#saved_research > p').on('click', function() {
  console.log('1p',$(this).children().eq(0).text());
  console.log('2p',$(this).children().eq(1).text());
  console.log('3p',$(this).children().eq(2).text());

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="saved_research">
<p>Paris</p> <p>London</p> <p>NewYork</p>
</div>

Или используйте делегирование события:

$('#saved_research').on('click', 'p', function() {
  console.log($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="saved_research">
<p>Paris</p> <p>London</p> <p>NewYork</p>
</div>

Answer 3

Итак, ваш javascript говорит "получить все <p> внутри #saved_research". Вам нужно добавить специфицированный c идентификатор к вашему html. Есть много способов сделать это, но один из лучших способов сделать это с помощью атрибутов данных:

<div id="saved_research">
   <p data-paragraph="1">Paris</p>
   <p data-paragraph="2">London</p>
   <p data-paragraph="3">New York</p>
</div>

$("#saved_research").click(function() {
    console.log($("[data-paragraph='1']").text());
});

Используйте атрибуты данных, а не идентификаторы или классы, чтобы обозначать вещи в html, которые связаны с javascript. Некоторые считают это (включая меня) лучшей практикой. Это позволяет вам узнать, что в вашем html специально для javascript. Например, когда вы смотрите на ваш html в будущем, вы помните, что id #saved_research используется javascript? Если нет, кто-то, кто занимается дизайном страницы, может изменить #saved_research на #save_research, думая, что он связан только с CSS. Таким образом, они ломают javascript. С помощью атрибутов данных становится очень ясно: этот идентификатор используется для javascript.

Редактировать: на основе вашего комментария о том, что html не существует на странице при загрузке страницы, вот что вам нужно сделать:

$(window.document).on('click', "#saved_research", function() {
    console.log($("[data-paragraph='1']").text());
});

Обратите внимание на другой формат, с .on('click'? Этот формат необходим, если у вас есть элементы, которые динамически добавляются на страницу. Формат .click работает, только если элемент существует на странице при первой загрузке страницы. Вы можете использовать этот формат .on('click' с любыми другими ответами, перечисленными на этой странице, все они работают с этим форматом.