Using data attr to make multiple dropdownbuttons work

[PropKittyParticipant]

Since right now, each dropdownbutton needs a unique identifier, I built this bit of code so that when my team copies the code out of our stylesheet, all they need to do is change the second half of the classname on the button and tree:

<div class="dropDownButton_styleguide dropdownLight">
        <div style="border: none;" class='dropDownTree_styleguide'>
                <ul>
                        <li item-selected='true'>Test</li>
                        <li>test1</li>
                        <li>test2</li>
                        <li>needed some kind of<br>longer test so here it is</li>
                        <li>test3</li>
                </ul>
        </div>
</div>

$("div[class*=dropDownButton").each(function(){
        var className = $(this).attr('class').split(' ');
        for (var index in className) {
            if (className[index].match(/dropDownButton_/)) {
                var buttonName = className[index].split('_')[1];
                $(".dropDownButton_" + buttonName).jqxDropDownButton({ width: '25%', height: 25 });
                $(".dropDownTree_" + buttonName).on('select', function (event) {
                    var args = event.args;
                    var item = $(".dropDownTree_" + buttonName).jqxTree('getItem', args.element);
                    var dropDownContent = '<div class="currentLabel" style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
                    $(".dropDownButton_" + buttonName).jqxDropDownButton('setContent', dropDownContent);
                });
                $(".dropDownTree_" + buttonName).jqxTree({ width: 200 });
            }
        }
    });

And it works just fine. So all they have to do is make the class name on a button drop down (dropDownButton_SOMETHING) something unique and it’s all good. However, this is kind of a terrible way to go about this but so far I haven’t been able to make it any other way. I’d like to use a data-attribute but no matter what I put in my code to replace using the class name, it just stops functioning.

Am I missing something? Is there a requirement on it being a class name? Any help appreciated. Thank you!

[PropKittyParticipant]

As a follow up: this is the code I was attempting to make work:

$("[data-ddb]").each(function () {
        console.log(this);
        $(this).jqxDropDownButton({ width: '25%', height: 25 });
        var attribute = $(this).data("ddb");
        var tree = $(this).next(".dropDownTree");
            $(this).jqxDropDownButton({ width: '25%', height: 25 });
            $(tree).on('select', function (event) {
                console.log((tree));
                var args = event.args;
                var item = $(tree).jqxTree('getItem', args.element);
                var dropDownContent = '<div class="currentLabel" style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
                $(this).jqxDropDownButton('setContent', dropDownContent);
            });
            $(tree).jqxTree({ width: 200 });

    });

[PropKittyParticipant]

Manage to actually solve this myself, many hours later:

<div class="dropdownDark" data-ddb="styleguide2">
                <div data-ddt="styleguide2">
                    <ul>
                        <li item-selected='true'>Test DARK</li>
                        <li>test1</li>
                        <li>test2</li>
                        <li>needed some kind of <br>longer test so here it is</li>
                        <li>this is a much longer li item without a break tag in it</li>
                        <li>test3</li>
                    </ul>
                </div>
            </div>

$("[data-ddb]").each(function () {
        var currentButton = $(this);
        $(this).jqxDropDownButton({ width: '25%', height: 25 });
        var tree = $('[data-ddt="'+$(this).data("ddb")+'"]');
        $(tree).on('select', function (event) {
            var item = $(tree).jqxTree('getItem', event.args.element);
            var dropDownContent = '<div class="currentLabel" style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
            $(currentButton).jqxDropDownButton('setContent', dropDownContent);
        });
        $(tree).jqxTree({ width: 200 });
    });

[Author]

Posts