Switch out the name of multiple elements with mootools

Question

Switch out the name of multiple elements with mootools

Is there a Moo tool that can replace multiple element IDs?

I currently have the following code:

    $$('myelement').each(function(el){ 
            var get_all_labels = el.getElements('label');
            var get_label_id = get_all_labels.getProperty('id');
            el.addClass(get_label_id);
        });

However, my labels (labael_name) return an additional suffix like -elem,,, and I need to remove -elem,, from the new parent class name created. I tried using `replace` but it returned an error saying that `replace` is not a function. I also attempted custom string replacement for JavaScript, but I'm not having any success with it. Any hints or suggestions would be greatly appreciated. Thank you!

javascript mootools

Answer 1

Answer №1

There is a slight error in this explanation.

var get_all_labels = el.getElements('label');

will give you a collection

var get_label_id = get_all_labels.getProperty('id');

will return an array of ids.

So, if you only have one label, the process will be as follows:

[labelObject#someid-elem], which will then result in ["someid-elem"]

The issue arises when using element.addClass because it requires a single string, not an array of strings. However, you can use `array.join` to resolve this problem.

If you have multiple labels and need to add all of them as classes to the element you are looping through, you can follow these steps:

$$('myelement').each(function(el) {
    var get_all_labels = el.getElements('label');

    // Get all ids and replace them... use .get for 1.2+ or .getProperty for 1.11
    var get_label_ids = get_all_labels.map(function(label) {
        return label.getProperty("id").replace("-elem", "");
    });

    // Add to parent element.
    el.addClass(get_label_ids.join(" "));
    console.log(el);
});

If this behavior is not what you intended and you actually have only one label, then simply do:

$$('myelement').each(function(el) {
    var id = el.getElement('label').get("id").replace("-elem", "");
    el.addClass(id);
    console.log(el);
});

Answer 2

There is a slight error in this explanation.

var get_all_labels = el.getElements('label');

will give you a collection

var get_label_id = get_all_labels.getProperty('id');

will return an array of ids.

So, if you only have one label, the process will be as follows:

[labelObject#someid-elem], which will then result in ["someid-elem"]

The issue arises when using element.addClass because it requires a single string, not an array of strings. However, you can use `array.join` to resolve this problem.

If you have multiple labels and need to add all of them as classes to the element you are looping through, you can follow these steps:

$$('myelement').each(function(el) {
    var get_all_labels = el.getElements('label');

    // Get all ids and replace them... use .get for 1.2+ or .getProperty for 1.11
    var get_label_ids = get_all_labels.map(function(label) {
        return label.getProperty("id").replace("-elem", "");
    });

    // Add to parent element.
    el.addClass(get_label_ids.join(" "));
    console.log(el);
});

If this behavior is not what you intended and you actually have only one label, then simply do:

$$('myelement').each(function(el) {
    var id = el.getElement('label').get("id").replace("-elem", "");
    el.addClass(id);
    console.log(el);
});

Switch out the name of multiple elements with mootools

Answer №1

Similar questions

Setting up a textarea tooltip using highlighter.js

Is there a comparable Javascript alternative to the Ruby gem "site_prism" for Page Objects design?

Updating Arrays in Node.js isn't happening as expected

Tips for iterating through a collection of arrays with jQuery

Display a DIV next to the mouse cursor when a span is hovered over

Every time Grunt detects newer files, it automatically triggers the imagemin:dynamic task

Looking for a way to execute code exclusively when the 'other' option is chosen? Let's tackle this challenge with Javascript and swig

Generating Unique Random DIV IDs with JavaScript

AngularJS radio buttons can now be selected as multiple options

Unable to establish connection to MongoHQ using Node.js connection URL

Issue with rendering components list in React.js

Unable to properly zoom in on an image within an iframe in Internet Explorer and Google Chrome

Having issues with the sidebar malfunctioning and unsure of the cause

Vue: The async Apollo mixin function successfully logs a value, however it ultimately returns as undefined

Ways to maximize the amount of content contained within a box

What is the best way to create a visual separation between these two arrows using styled-components?

What is the best way to limit input to only numbers and special characters?

issue with AJAX POST request not functioning correctly upon form submission

Issue: Encounter of "Uncaught (in promise) TypeError" while implementing RiveScript chatbot in Angular

Parsing JSON in an Express application