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

Removing a similar object from an array using JavaScript

Toggle button with v-bind in Nativescript Vue

Monitoring AJAX POST progress with Node.js and Multipart: XMLHttpRequest

Combining React with a jQuery plugin

Is it possible to access the ID element of HTML using a variable in jQuery?

Guide to changing the background color of material ui drawer component using styled-components

Text field value dynamically changes on key press update

The importance of context visibility for functions in JavaScript within a React.js environment

There seems to be a syntax error in the AngularJS/Bootstrap code, with an unrecognized expression

Create a personalized edit button for ContentTools with a unique design

How to dynamically change the color of a button in a list in Vue.js when it is clicked

Tips on how to bring in a module from index.js

Changing the image source using Javascript and extracting part of the URL

Click the "Add" button to dynamically generate textboxes and copy the contents from each

Interactive font-awesome icons within an interactive dropdown menu

What is the best way to showcase the information of each object on a click event in Vue.js?

Images do not appear on Bootstrap Carousel as expected

Adjust the size of an Angular component or directive based on the variable being passed in

Replacing text within nested elements

JavaScript - returning a false error