Changing aria-control attribute value in Cloned fields

Question

I've altered the code given by Milan Jaric from this question Jquery Clone Form Fields and increment ID but I'm coming across an issue where I'm trying to clone a Bootstrap collapse. I can't see to figure out how to alter the attribute 'aria-control' value.

Here's the demo of what I currently have. the ID and HREF work fine by themselves, but the moment I try to change the 'aria-control' value, all of the ids and hrefs in the bootstrap collapse do not change from the default values. Any ideas?

JS Script

var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".clonedBox").length;

function clone() {
    $(this).parents(".clonedBox").clone()
        .appendTo("div#accession_boxes")
        .attr("id", "clonedBox" + cloneIndex)
        .find("*")
        .each(function () {
            var id = this.id || "";
            var match = id.match(regex) || [];

            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
                this.href = match[1] + (cloneIndex);
                this.attr("a[aria-controls]") = match[1] + cloneIndex;
            }
        })
        .on('click', '#btnAddBox', clone)
        .on('click', '#btnDelBox', remove);
    cloneIndex++;
}
function remove() {
    $(this).parents(".clonedBox").remove();
}
$("#btnAddBox").on("click", clone);

$("#btnDelBox").on("click", remove);

And yes, I know my remove buttons do not work, but it's not a priority right now.

EDIT:

Thanks to lmgonzalves, the JS Script now works. Below is the updated script. Thank you again for all of the help!

JS SCRIPT (UPDATED)

    var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".clonedBox").length;

function clone() {
    $(this).parents(".clonedBox").clone()
        .appendTo("div#accession_boxes")
        .attr("id", "clonedBox" + cloneIndex)
        .find("*")
        .each(function () {
            var id = this.id || "";
            var href = this.href || "";
            var aria = $(this).attr("aria-controls") || "";

            var matchID = id.match(regex) || [];
            var matchHref = href.match(regex) || [];
            var matchAria = aria.match(regex) || [];

            if (matchID.length == 3) {
                this.id = matchID[1] + (cloneIndex);
                this.href = matchHref[1] + (cloneIndex);
                this.aria = matchAria[1] + (cloneIndex);
            }
        })
        .on('click', '#btnAddBox', clone)
        .on('click', '#btnDelBox', remove);
    cloneIndex++;
}
function remove() {
    $(this).parents(".clonedBox").remove();
}
$("#btnAddBox").on("click", clone);

$("#btnDelBox").on("click", remove);

`this.attr("a[aria-controls]") = match[1] + cloneIndex;` does nothing, pass 2 args to set — dandavis, Jun 19 '15 at 21:15

score 1 · Accepted Answer · answered Jun 19 '15 at 21:42

To set an attribute using attr() you need this syntax:

$(element).attr("name", value);

So in your code use:

$(this).attr("aria-controls", match[1] + cloneIndex);

Instead:

this.attr("a[aria-controls]") = match[1] + cloneIndex;

Note that also you need to "wrap" with $() the this to convert it to jQuery object and to allow use attr() and others jQuery functions.

DEMO HERE

Changing aria-control attribute value in Cloned fields

1 Answers1