Получить элементы внутри блока по порядку и присвоить свое значение
Добрый день. Есть следующий кусок html:
<div class="task-list"> <div id="task-1" class="task" data-name="category"> <p>Категории</p> <a href="#" class="icon-pencil">✎</a> </div> <div id="task-2" class="task" data-name="size"> <p>Размер</p> <a href="#" class="icon-pencil">✎</a> </div> <div id="task-3" class="task" data-name="color"> <p>Цвет</p> <a href="#" class="icon-pencil">✎</a> </div> <div id="task-4" class="task" data-name="brend"> <p>Производитель</p> <a href="#" class="icon-pencil">✎</a> </div> </div> Как последовательно получить data-name всех дивов внутри task-list и присвоить им значения? Например, должно получиться: category:10,size:20,color:30,brend:40 Спасибо |
$(function() {
$('[data-name]').each(function() {
var attr = this.getAttribute('data-name') + ':30';
this.setAttribute('data-name', attr)
});
});
|
Спасибо. Правда, я наверно не очень правильно выразил мысль. Мне нужно не изменить data-name, а просто, получить весь список и передать в переменную. В итоге моя переменная на выходе должна содержать category:10,size:20,color:30,brend:40 Чтобы потом обработать через ajax, или есть более элегантное решение?
|
Янковиц,
Некоторые спешат, невнимательно читают условие... Вот верный вариант. :)
$('[data-name]').attr('data-name', function(i, v) {
return v+=':'+(++i*10);
});
|
Не совсем понял как загнать в переменную... Простите, мозк не соображает, а работу делать надо ;)
|
Цитата:
|
Цитата:
var str = $('[data-name]').attr('data-name', function(i, v) {
return v+=':'+(++i*10);
}).map(function(indx, el) {
return $(el).data('name');
}).get().join(',');
|
Цитата:
|
var str = $('[data-name]').attr('data-name', function(i, v) {
return v+=':'+(++i*10);
}).map(function(indx, el) {
return $(el).data('name');
}).get().join(',');
Не совсем понимаю, где здесь переменная |
Янковиц,
снизу - alert(str); |
Rasy,
очень внимательно читаете, но как гончая ... Зачем же один цикл на изменение, затем второй на объединение, если можно сразу к коллекции $.map($('[data-name]'), function(...).join(',')? И .get() здесь и нафик не нужен. |
laimas,
С утилитой map лучше, но автор сразу не правильно сформулировал задачу и такой вариант не кто не смог бы родить. |
Янковиц,
если 10 и прочее к действительно к индексу привязано, а на выходе строка, то все намного проще, чем советуют:
var s = $.map($('[data-name]'), function(e, i) {
return e.getAttribute('data-name') + ':' + ++i * 10
}).join(',');
|
Цитата:
|
Цитата:
|
Цитата:
|
И еще один момент. Вообще, это часть drag and drop системы.
Хватаю из одного блока, и перемещаю в другой. При тестировании, я динамически меняю количество div. Код предложенный в топике повесил на клик кнопки. Однако в alert выводит список с data-name элементов при загрузки страницы, но не фиксирует при динамическое изменение... Как это решить? И еще, данные берет из первого блока а не из второго... |
Цитата:
var s = $.map($('[data-name]').first(), function(e, i) {...
//или
var s = $.map($('[data-name]').last(), function(e, i) {...
|
Цитата:
|
Цитата:
Типа такого??:
$('body').on('click', '.save-filter', function(){
var str = $.map($('[data-name]').last(), function(e, i) {
return e.getAttribute('data-name') + ':' + ++i * 10
}).join(',');
alert(str);
});
|
Не может быть проблемы в этом? Событие находится внутри $(document).ready(function(){
|
Цитата:
|
Все, разобрался. Работает. Спасибо большое. Да, немного затупил...
|
Цитата:
|
Цитата:
|
Янковиц,
вот так должно быть
var str = $.map($('div.task-list').last().children('div'), function(e, i) {
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 03:29. |