Добавьте идентификаторы к <p>, используя JavaScript или jQuery или Angular

Question

У меня есть HTML документ, который генерируется динамически.

В нем есть набор тегов <p>, в которых есть текст. Я пытаюсь выбрать <p>, когда пользователь нажимает на указанный текст c. К сожалению, мне не разрешено добавлять идентификаторы к тегам <p>, которые я мог бы использовать для выбора блока Speci c теста.

Поэтому мне нужно найти способ динамически добавлять идентификаторы в теги <p>, используя javascript или jQuery или angular.

Я видел несколько решений, в которых используется jQuery .attr("id", "newId"), но для этого требуется селектор, и я не знаю, что использовать в качестве селектора.

Кто-нибудь может что-то подсказать?

Answer 1

Может быть, это поможет:

$(function(){
  $("p").on("click", function(){
    $(this).attr('id', 'value');
  });
})

http://plnkr.co/edit/mvKZBopcwuVqAJV7vq7j?p=preview

Answer 2

Предполагая, что все и только заинтересованные элементы p находятся на странице, попробуйте это:

jQuery( 'p' ).on( 'click', function() {
  jQuery( this ).attr( 'id', 'yourID' );
} );

Конечно, вам понадобится некоторый код для управления прогрессивными идентификаторами, поскольку они должны быть уникальными на странице.

Чтобы быть более точным c и привести пример создания прогрессивных идентификаторов, скажем, все ваши p-элементы находятся внутри контейнера:

<div id="target_paragraphs">
  <p>...some text 1..</p>
  <p>...some text 2..</p>
  <p>...some text 3..</p>
  <p>...some text 4..</p>
  ...
  <p>...some text n..</p>
</div>

вы можете использовать этот скрипт:

count = 0;

jQuery( '#target_paragraphs p' ).on( 'click', function() {
  jQuery( this ).attr( 'id', 'paragaraph_ID_' + count );
  count++;
} );

Answer 3

Не глядя на ваш код, мы не можем увидеть проблему, но, насколько я понимаю, вам нужно событие click для всех тегов p? Вы можете привязать событие ко всем p тегам, например: $ ("p"). Click (function (event) {});

внутри функции, this станет элементом, по которому вы щелкнули .