refactor(plugins): improve how we query elements

[Johann-S]

It should help us to be more performant on how we get our DOM elements

Should help a bit here: #26419 but we should improve collapse with multi targets

[XhmikosR]

Maybe cache the length in the loops

[Johann-S]

it was interesting in old browsers but not anymore as far as I know

[XhmikosR]

Doesn't hurt to do it either.

[Johann-S]

in that case I'll target that in an other PR, to fix all at once 😉

[Johann-S]

Just a few lines please Bundlesize 😢

[mibby]

Apologies for commenting on a pull-request over a year old, but I believe this change may be causing a permanent breaking change for me with newer versions of bootstrap. Perhaps you could enlighten me if I'm missing something obvious?

I updated from Bootstrap v4.1.1 to v4.3.1 when I noticed a page stopped functioning. Testing every version in-between, the breakage seems to occur with v4.1.2. I didn't notice any outstanding breaking changes in the changelog outside of this possible change.

Relevant site script.

var all_member_id = 3187407;
function tab_setup() {
    var counter=0;
    $('.m_members').each(function() {
        counter++;
        var title = $(this).parents('.container').find(
            '.header_text_text').text();
        var tab_id = $(this).attr('class').replace(/m_members\s+/g,
            '');
        $(this).attr('data-tab', tab_id);
        if (counter == 1) {
            $('.roster_page .nav-tabs').append(
                '<li class="active"><a data-toggle="tab" href="#' +
                tab_id + '">' + title + '</a>');
            $('.roster_page .tab-content').append(
                '<div class="tab-pane active" id="' + tab_id +
                '"></div>');
            $('#' + tab_id).append($('.m_members[data-tab="' +
                tab_id + '"]'));
        } else {
            $('.roster_page .nav-tabs').append(
                '<li><a data-toggle="tab"  href="#' + tab_id +
                '">' + title + '</a>');
            $('.roster_page .tab-content').append(
                '<div class="tab-pane" id="' + tab_id +
                '"></div>');
            $('#' + tab_id).append($('.m_members[data-tab="' +
                tab_id + '"]'));
        }
    });
};

Live page functioning fine with bootstrap v4.1.1.

Test page failing to toggle data from other elements with bootstrap v4.1.2.

Full html for the specific container.
https://pastebin.com/raw/7BFVSH8q

The data elements being used for toggling are loaded individually from their own module containers.

---

I've also noticed in the navigation that the border-bottom line on hover cuts off in the nav-item once it reaches the carousel with Chrome. Though this is probably an entirely separate issue and perhaps a browser rendering bug.

Fine with Firefox.

Cut prematurely with Chrome.

[Johann-S]

Hi @mibby that's happen because you use selector which contains only numbers, and it's not a valid selector. We added information about that here: https://getbootstrap.com/docs/4.3/getting-started/javascript/#selectors

[mibby]

Ah, I see. That indeed would be the problem. Thanks for the info!

Is there any way to perhaps override the selector validation? As I'm not able to change the div ids for the container modules hosting the data itself, which is where the numbers are coming from.

[Johann-S]

@mibby You can change the href attribute by something like that: .tab-content #<your id> it'll work