Использую Bootstrap в проекте, а также плагин Collapse (
getbootstrap.com/javascript/#collapse)
Но теперь мне необходимо присвоить уникальный id (data-target) каждому такому блоку (collapse).
Суть в том, что используется "костыль", который заменяет все table на эти самые Collapse. Сам в JS/jQuery я не силен, но буду признателен, если кто-нибудь подтолкнет меня в нужном направлении.
$(document).ready(function () {
$('.countries-info').each(function () {
var $this = $(this);
blocks = [
{title : 'О стране', content : ''}
];
$this.find('.countries-info-content.hidden').children().each(function () {
var elem = $(this);
if (elem.is('table') && elem.find('td').length === 1) {
blocks.push({title : elem.text(), content : ''})
} else {
blocks[blocks.length - 1].content += elem[0].outerHTML
}
});
blocks.forEach(function (item) {
var
title = $('<div/>', {
'class' : 'panel-heading',
'data-toggle' : 'collapse',
'data-target' : "#test",
'text' : $.trim(item.title)
}),
content = $('<div/>', {
'class' : 'well',
'html' : item.content
}),
wrapper = $('<div/>', {
'class' : 'collapse',
'id' : 'test'
}).append(title).append(content);
if ($.trim(item.content).length) {
$this.append(wrapper);
}
});
$this.find('.collapse').addClass('in');
$this.find('.countries-info-content.hidden').remove();
$('p').each(function() {
var $this = $(this);
if($this.html().replace(/\s| /g, '').length == 0)
$this.remove();
});
});
});