Установить значения из массива дочерним элементам

@lev1988 · Регистрация: 08.06.2015

Author24 — интернет-сервис помощи студентам

У меня есть html код:

HTML5

<div class="at-repater-block">
<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topbanner' />
<span class='at-radio-label'>topbanner</span>
<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='undermenu' />
<span class='at-radio-label'>undermenu</span>
<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topstring' />
<span class='at-radio-label'>topstring</span>
</div>
<div class="at-repater-block">
<input type='radio' class='at-radio' name='re_widget[1][set_style_for_widget]' value='topbanner' />
<span class='at-radio-label'>topbanner</span>
<input type='radio' class='at-radio' name='re_widget[1][set_style_for_widget]' value='undermenu' />
<span class='at-radio-label'>undermenu</span>
<input type='radio' class='at-radio' name='re_widget[1][set_style_for_widget]' value='topstring' />
<span class='at-radio-label'>topstring</span>
</div>

И есть jquery код:

Javascript

jQuery(document).ready(function(){
var fruit = ["111", "222", "333"];
fruit.forEach(function(value,i){
var label = $(".at-radio-label")[i];
$(label).text(value);
});
});

Он работает, но только для дочерних элементов первого родителя (.at-repater-block) , заменяя текст в элементах с классом .at-radio-label на элементы массива fruit . Как распространить это и на дочерние элементы других родителей? Чтобы получилось так:

HTML5

<div class="at-repater-block">
<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topbanner' />
<span class='at-radio-label'>111</span>
<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='undermenu' />
<span class='at-radio-label'>222</span>
<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topstring' />
<span class='at-radio-label'>333</span>
</div>
<div class="at-repater-block">
<input type='radio' class='at-radio' name='re_widget[1][set_style_for_widget]' value='topbanner' />
<span class='at-radio-label'>111</span>
<input type='radio' class='at-radio' name='re_widget[1][set_style_for_widget]' value='undermenu' />
<span class='at-radio-label'>222</span>
<input type='radio' class='at-radio' name='re_widget[1][set_style_for_widget]' value='topstring' />
<span class='at-radio-label'>333</span>
</div>

Демо: https://jsfiddle.net/uqzLomvj/

@Lazy_Den · 20.01.2016, 20:47

Javascript

$(document).ready(function() {
  var fruit = ["111", "222", "333"];
  $('.at-repater-block').each(function(i, block) {
    $('.at-radio-label', block).each(function(i, label) {
      $(label).text(fruit[i]);
    });
  });
});

@lev1988 · 20.01.2016, 21:36 **[ТС]**

Спасибо. Работает.

Добавлено через 19 минут
И еще вопрос. Как можно запустить этот скрипт повторно при добавлении на страницу еще одного такого же родительского элемента с набором дочерних. Добавление происходит при нажатии тега img с идентификатором #add-re_widget

@Lazy_Den · 20.01.2016, 22:15

Сообщение от lev1988

Как можно запустить этот скрипт повторно

Код обернуть в функцию, которую запускать когда потребуется.

Javascript

$(function(){
    replaceLabel(); // запустить после загрузки DOM
    $('button').on('click', replaceLabel); // запустится по нажатию на кнопку
    // и т.д.
});
 
function replaceLabel() {
  var fruit = ["111", "222", "333"];
  $('.at-repater-block').each(function(i, block) {
    $('.at-radio-label', block).each(function(i, label) {
      $(label).text(fruit[i]);
    });
  });
}

@lev1988 · 21.01.2016, 11:10 **[ТС]**

Сообщение от Lazy_Den

$(function(){ replaceLabel();
$('button').on('click', replaceLabel);
});

Эту часть прописал так:

Javascript

jQuery(document).ready(function(){
replaceLabel();
$("#add-re_widget").click(function() {
interval(function(){
replaceLabel();
 });
});
});

Функцию interval взял отсюда: http://www.thecodeship.com/web... tinterval/
$('button').on('click', replaceLabel); не сработал - возможно, надо запускать функцию через некое время после события click .

@Lazy_Den · 21.01.2016, 11:39

lev1988, я не понимаю, зачем вам какой-то интервал, но вам, конечно же, видней. Однако, если взять ваш код, функцию interval(), код, который мы разбирали и сложить всё вместе, то проблем я не наблюдаю. Проверяем в песочнице

JS

Javascript

$(function() {
  //replaceLabel();
  $("#add-re_widget").click(function() {
    interval(function() {
      replaceLabel();
    });
  });
});
 
function replaceLabel() {
  var fruit = ["111", "222", "333"];
  $('.at-repater-block').each(function(i, block) {
    $('.at-radio-label', block).each(function(i, label) {
      $(label).text(fruit[i]);
    });
  });
}
 
function interval(func, wait, times) {
  var interv = function(w, t) {
    return function() {
      if (typeof t === "undefined" || t-- > 0) {
        setTimeout(interv, w);
        try {
          func.call(null);
        } catch (e) {
          t = 0;
          throw e.toString();
        }
      }
    };
  }(wait, times);
 
  setTimeout(interv, wait);
};

@lev1988 · 21.01.2016, 11:51 **[ТС]**

Возможно, я несколько неразборчиво написал второе сообщение. В админке (у меня) есть несколько блоков. При нажатии на кнопку добавляется блок. Можно и еще добавить, и еще. На Вашей демо странице при нажатии на кнопку не происходит добавление элементов. Там происходит работа в уже существующих блоках.
Близкий пример того, что у меня: появление нового блока при нажатии кнопки "Add a field" на демо странице http://jsfiddle.net/qBURS/2/

@Lazy_Den · 21.01.2016, 12:36

lev1988, так вы хотите запускать функцию после добавления нового блока? Даже без лишних манипуляций будет работать, но для перестраховки, можно сделать задержку в пару миллисекунд. Смотрим.

Javascript

1	setTimeout(replaceLabel, 5); // и без всяких сторонних функций

@lev1988 · 21.01.2016, 12:42 **[ТС]**

Да. Спасибо. setTimeout отработал как надо.

@lev1988 0 / 0 / 0 Регистрация: 08.06.2015 Сообщений: 13
	20.01.2016, 21:36 [ТС]	3
	Спасибо. Работает. Добавлено через 19 минут И еще вопрос. Как можно запустить этот скрипт повторно при добавлении на страницу еще одного такого же родительского элемента с набором дочерних. Добавление происходит при нажатии тега img с идентификатором #add-re_widget 0

@lev1988 0 / 0 / 0 Регистрация: 08.06.2015 Сообщений: 13
	21.01.2016, 11:51 [ТС]	7
	Возможно, я несколько неразборчиво написал второе сообщение. В админке (у меня) есть несколько блоков. При нажатии на кнопку добавляется блок. Можно и еще добавить, и еще. На Вашей демо странице при нажатии на кнопку не происходит добавление элементов. Там происходит работа в уже существующих блоках. Близкий пример того, что у меня: появление нового блока при нажатии кнопки "Add a field" на демо странице http://jsfiddle.net/qBURS/2/ 0

@lev1988 0 / 0 / 0 Регистрация: 08.06.2015 Сообщений: 13
	21.01.2016, 12:42 [ТС]	9
	Да. Спасибо. setTimeout отработал как надо. 0

Опции темы

Установить значения из массива дочерним элементам

Решение