Поиграйте здесь: http://jsfiddle.net/yv1vLhd9/

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

Учитывая следующий HTML:

<div class='original' data-custom="dog"></div>
<div class='original' data-custom="cat"></div>
<div class='original' data-custom="sheep"></div>

И следующий CSS:

div {
  width: 100px;
  height: 100px;  
}

div:before {
  content: attr(data-custom);
}

.original {
  border: blue solid 1px;
}

.new {
  border: pink solid 1px;
}

Как я могу убедиться, что есть новый элемент с каждым из пользовательских атрибутов данных?

Например:

$(document).ready( function(){
  var $originalEl = $('.original')
  var originalData = $originalEl.data('custom')
  var replacement = '<div class="new" data-custom="' + originalData + '"></div>'
  $originalEl.after(replacement).hide()
});

Но это создает три новых атрибута data-custom = "dog".

0
steel 15 Дек 2015 в 00:00

3 ответа

Лучший ответ

Вы должны использовать $.each для элемента. Начиная после того, как вы объявите $originalEl

$originalEl.each(function(){
    // code here
})

Вот ваш код обновлен http://jsfiddle.net/yv1vLhd9/4/

4
MurDaD 14 Дек 2015 в 21:05

http://jsfiddle.net/VixedS/wz95hh3r/1/

$(document).ready(function(){
    $('.original').each(function(){
        $(this).hide().clone().attr('class','new').show().appendTo('body');
    })
});
1
Vixed 14 Дек 2015 в 21:09

JQuery предоставляет множество методов манипулирования DOM, которые помогут вам достичь желаемого ввода. Как отмечено в некоторых других ответах, вам нужно пройти через набор соответствующих элементов, используя $.each. Кроме того, вместо создания новых элементов из строк вы можете использовать метод .clone() для:

  1. клонировать существующий элемент
  2. изменить ваш новый элемент
  3. вставить его после оригинального элемента
  4. перейти к исходному элементу
  5. и, наконец, скрыть оригинальный элемент.
$(function () {
    $('.original').each(function (idx, elem) {
        $(elem)
            .clone()
            .removeClass('original')
            .addClass('new')
            .insertAfter($(elem))
            .prev()
            .hide();
    });
});
div {
  width: 100px;
  height: 100px;  
}

div:before {
  content: attr(data-custom);
}

.original {
  border: blue solid 1px;
}

.new {
  border: pink solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='original' data-custom="dog"></div>
<div class='original' data-custom="cat"></div>
<div class='original' data-custom="sheep"></div>

Ссылки на метод API:

1
War10ck 14 Дек 2015 в 21:12