Javascript JQuery печать на несколько делений на странице загрузки?

Question

У меня в основном есть несколько div с идентификаторами "id_1", "id_2", "id_3" и т. Д. Все div изначально изначально пусты.

Я хочу при загрузке страницы заполнить все элементы div определенным html-содержимым. Но меня беспокоит то, что мне также нужно извлечь часть уникального идентификатора для использования в html:

<div id="id_3">
     <div id="inner_3></div>
</div>

где внутренний div - это то, что печатается. Обратите внимание, что «3» извлекается из идентификатора контейнера div с помощью javascript, а затем впоследствии используется и печатается во внутреннем div.

Есть идеи, как это сделать с помощью jquery? Заранее спасибо.

Answer 1

Вы можете получить все элементы div с идентификатором, который начинается с определенной строки:

$(function() {
    $('div[id^=id_]').each(function() {
        var id = $(this).attr('id').split('_').pop();
        $(this).html(
            $('<div/>').attr('id','inner_' + id)
        );
    });
});

Затем вы перебираете каждую из них, получаете идентификатор и выполняете ваши HTML-манипуляции.

Answer 2

Есть несколько способов сделать это, но, в конце концов, это просто манипуляции со строками. Вот пример:

// on page load
$(function(){
    //find all divs and iterate through them - you can use any selector you like
    $("div").each(function(){
        //this gets the id attribute of the div we are currently on in the loop
        var id = $(this).attr("id");
        //this gets the number at the end - notice that its just string manipulation
        var nid = id.slice(id.lastIndexOf("_") + 1)
        //create inner div, give it an id and append
        var innerDiv = $('div').attr("id", "inner_" + nid);
        $(this).append(innerDiv);
        //all done - you can append content to inner div here
        // innerDiv.append(someContent);
    });
});