jQuery. Атрибут для p тегов в HTML - PullRequest
Новая
       1

jQuery. Атрибут для p тегов в HTML

0 голосов
/ 17 февраля 2020

Я хочу добавить атрибут 'data-class' к каждому абзацу в элементе HTML, для 'data-class' должно быть установлено значение class. Я использовал .attr, но не смог присвоить то же значение. В настоящее время на странице 9 абзацев с пронумерованным классом

p1, p2, p3 et c ...

Как мне просто установить данные -класс к тому же p-тегу?

У меня есть jQuery, как это до сих пор: 

$('p').attr('data-class', 'p'}

Ответы [ 5 ]

2 голосов
/ 17 февраля 2020

Вы можете перебирать каждый элемент p с помощью .each, устанавливая атрибут data-class равным значению атрибута class (проверьте элементы после запуска фрагмента, чтобы увидеть изменения ): 

$(document).ready(function() {
  $('p').each(function() {
    $(this).attr('data-class', $(this).attr('class'));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="p1">P1</p>
<p class="p2">P2</p>
<p class="p3">P3</p>
1 голос
/ 17 февраля 2020 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<p>P1</p>
<p>P2</p>
<p>P3</p>
<script>
$(function(){
    // $('p').attr('data-class', 'p');
   //This will attach a new attribute o you dom element and that you can visible in  when in you inspect.
or 
     $('p').data('class', 'p');
     // This may not visible in dom.
     console.log($('p').data('class'));
     // Dynamic creation
     $('<p />').data('class', 'p').appendTo('body');
     // Append with loop
     const data = ['p1', 'p2', 'p3'];
     $('p').each((index,element)=>{
           console.log(index,element)});
           $(element).data('class', data[index]);
     });
});
</script>
</body>
</html>
1 голос
/ 17 февраля 2020

Вы можете использовать метод .each(fn(index, element){}) для итерации и индивидуальной установки значения. 

$('p').each(function(index, element) {
  $(this).attr("data-class", "p" + (index+1));  
  //or
  //$(this).attr("data-class", "p" + $(this).index());  
  
  //For Demonstartion 
  $(this).text("p" + (index+1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p></p>
<p></p>
<p></p>

В качестве альтернативы .attr(key, func) также может использоваться. 

$('p').attr("data-class", function(index, element) {
  var v = "p" + (index + 1);
  //For Demonstartion 
  $(this).text(v);

  return v;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p></p>
<p></p>
<p></p>
0 голосов
/ 17 февраля 2020

Попробуйте это 

var data_class = "value";

$("p").each(function(index) {
    $(this).setAttribute("data-class", data_class);
});
0 голосов
/ 17 февраля 2020

Просто попробуйте 

var data_class = "value";

$("p").each(function(index) {
  $(this).attr("data-class", data_class);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...