Добавить набор свойств к элементу

130

19 декабря 2020, 23:20

Когда создается объект jquery, в него можно добавить различные свойства через объект, будь то текст, атрибут или стили:

$('<h1>', {
    text: '...',
    class: 'heading'
});

Но возможно ли добавить такой же набор свойств уже созданному элементу? То есть, конечно, есть отдельные функции типа attr или addClass, но мне нужен универсальный метод для всех таких свойств. Что-то типа такого:

$('h1').addProperties({
    text: 'New text',
    id: '30'
});

Или, возможно, имеются какие-либо плагины для решения данной задачи?

Answer 1

То что Вы ищете это $(selector).attr() и $(selector).text()

$('h1').attr({ 
    id: 'id30' 
}) 
.text('New text'); 
 
console.log(id30)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<h1></h1>

Answer 2

Согласно документации, при создании jQuery элемента можно использовать объект, элементы которого используются как имена атрибутов и их значения. Пример этого Вы продемонстрировали в своём вопросе.
Если Вам необходимо перезаписать множество атрибутов элемента, то согласно документации сделать это можно так:

$('selector').attr({
    text: 'New text',
    id: '30'
});

При установки атрибута class или при использовании атрибута type элементов input и button в браузере IE8 и старее, будет выбрасываться исключение, если имена атрибутов указаны без кавычек.

Если же Вам нужно просто сохранить дополнительныю информацию в элемент, то для этого можно использовать:

Mетод jQuery .data()

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { isManual: true } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }

HTML5 data-* атрибуты

Позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData().

Пример использования:

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

Доступ в JavaScript

var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Answer 3

В общем я написал свою реализацию. По крайней мере, этого хватает для нужных мне свойств.

for (var key in attributes) {
    if ($.fn[key]) {
        element[key](attributes[key]);
    }
    else {
        element.attr(key, attributes[key]);
    }
}

Вся суть в том, что при создании нового элемента в jquery названия большинства свойств такие же, как и названия соответствующих функций для редактирования этих свойств. Т.е.:

$('<h1>', {
    text: '...'
});
// То же самое, что и
$('<h1>').text('...');

Поэтому я просто проверяю, существует ли такая функция в jquery, и выполняю на элементе. Если же ее нет, я присваиваю элементу атрибут. Здесь "attributes" - объект, содержащий свойства, "element" - соответственно элемент, на который все это применяется.