Looping through an array with CSS rules, and applying them to element

Question

I want users to be able to input CSS input, and have that CSS applied to the last selected element(selected by the "rangeselector" variable). The code selects the right element, but only the first CSS-rule is applied.

ex: "background: blue; color:red;" only applies the background.

The function runs through the array correctly.

function customCss(){
  css = $("input.css").val();
  if(css.length < 10){
        alert("Insert valid CSS");
  }else{

        cssArray = css.split(";");
        counter = 0;
        cssArray.forEach(function(){
              var ruleSplit = cssArray[counter].split(":");
              target = $("[content_child=" + rangeselector + "]");
              target.css(ruleSplit[0] , ruleSplit[1]);
              counter = counter + 1;
        });
  }
}

If you know the problem, or have a better way of achieving the same goal, i would gladly hear you suggestions.

Thanks

In what format the user input the CSS?

void
– void

2015-02-19 21:16:23 +00:00
Commented Feb 19, 2015 at 21:16 — void
– void, Commented Feb 19, 2015 at 21:16
How you would write it in a document

user4122038
– user4122038

2015-02-19 21:22:44 +00:00
Commented Feb 19, 2015 at 21:22 — user4122038
– user4122038, Commented Feb 19, 2015 at 21:22
Where is rangeselector defined?

nanndoj
– nanndoj

2015-02-19 21:23:59 +00:00
Commented Feb 19, 2015 at 21:23 — nanndoj
– nanndoj, Commented Feb 19, 2015 at 21:23

nanndoj · Accepted Answer · 2015-02-19 21:17:38Z

1

By using Array.forEach() you already have the index and the reference to Array. You don't need use a counter

    cssArray = css.split(";");
    // counter = 0;
    cssArray.forEach(function(obj, key, array){
          var ruleSplit = obj.split(":");
          target = $("[content_child=" + rangeselector + "]");
          target.css(ruleSplit[0] , ruleSplit[1]);
          // counter = counter + 1;
    });

answered Feb 19, 2015 at 21:17

nanndoj

6,7907 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

deweyredman · Accepted Answer · 2015-02-19 21:20:22Z

0

have you tried stripping the elements before you set them? What's probably happening is that it's trying to set something like "color " instead of "color"

function customCss(){
  css = $("input.css").val();
  if(css.length < 10){
        alert("Insert valid CSS");
  }else{

        cssArray = css.split(";");
        counter = 0;
        cssArray.forEach(function(){
              var ruleSplit = cssArray[counter].split(":");
              target = $("[content_child=" + rangeselector + "]");
              target.css(ruleSplit[0].trim() , ruleSplit[1].trim());
              counter = counter + 1;
        });
  }
}

answered Feb 19, 2015 at 21:20

deweyredman

1,4501 gold badge9 silver badges12 bronze badges

1 Comment

deweyredman Over a year ago

I'd also consider refactoring the code like nanndoj suggested, you have no need for a counter.

Collectives™ on Stack Overflow

Looping through an array with CSS rules, and applying them to element

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related