Jquery selector variable syntax

Question

This should be a simple issue, I can't make it work however. The code takes a sentence line_2 and animates each letter line_2[i], I want to add a color to each letter. I added a variable heya and used a selector as shown in the code but its not working. Im probably something simple.

Here is the code:

for (i = line_2.length - 1; i >= 0; i--) {
    $('<div>', {
        var heya = "line2" + i;
        html: '<br><br><br><br>' + '<div id= ' + heya + '>' + line_2[i] + '</div>'
    })
    $("#" + heya).css("color", "blue");
    .addClass('letter')
        .appendTo(elements);
}

There is a semicolon after "blue" that prob shouldn't be there. — jwatts1980
– jwatts1980, Commented May 28, 2015 at 21:36
I don't think you can effect the css for an element until it has been added to the dom. — Allen Tellez
– Allen Tellez, Commented May 28, 2015 at 21:37
Also, I'm not sure what's going on inside that $('<div>', { .... }) code. That looks pretty wrong too. — jwatts1980
– jwatts1980, Commented May 28, 2015 at 21:40
Just a general hint that probably will save a lot of time for you : you should use the developer console that's provided by your browser. It shows most of the issues you got with your code. (IIRC in IE,Firefox and Chrome it's enabled with F12 or F11(IE?), or using the menu, in Safari it's Cmd+Alt+C). Also try getting used to the javascript debugger that's also included in most browsers ;) — Vivien Sonntag
– Vivien Sonntag, Commented May 28, 2015 at 21:49

jwatts1980 · Accepted Answer · 2015-05-28 21:44:15Z

2

Something more like this may do the trick:

for (i = line_2.length-1; i >=0; i--) 
{
    var heya ="line2" + i;

    $('<div></div>', {
        html: '<br><br><br><br>' + '<div id=\"' + heya +'\">' + line_2.charAt(i) + '</div>'
    })
    .css("color","blue")
    .addClass('letter')
    .appendTo(elements);
}

And to be clear, with the i-- in the for loop you are going through the string from end to beginning rather than beginning to end.

answered May 28, 2015 at 21:44

jwatts1980

7,3742 gold badges31 silver badges46 bronze badges

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

2 Comments

user3241846 Over a year ago

1980 thanks! you saved me lots of time. Using your code, the div with heya id is actually useless. is having a <div></div>, in the selector the same as selecting the dom element by id? About the counter, yes its intentional, I created a jquery animation and it needed to go from right to left!

jwatts1980 Over a year ago

If you want to select a div, it would be $('div'). The syntax we're using here is creating a new div on the fly. The new div is returned then we apply the css and class to it then append it to an actual element. Prior to the append it just exists in memory.

Patrick Evans · Accepted Answer · 2015-05-28 21:54:52Z

You have a few syntax errors and statements in the wrong place

var heya ="line2" + i; needs to be outside the {} otherwise you are going to get an error from it being in there

You probably want:

var heya ="line2" + i;
$('<div>', {
    html: '<br><br><br><br>' + '<div id="' + heya +'">' + line_2[i] + '</div>'
});

Also since your element hasnt been added to the dom yet you cannot use a jQuery(selector) to select it yet, you have to provide jQuery a context on which to search on

var ele = $('<div>', {
   html: '<br><br><br><br>' + '<div id="' + heya +'">' + line_2[i] + '</div>'
});
jQuery("#"+heya,ele).css("color","blue")
.addClass('letter')
.appendTo(elements);

But I do not see why you are creating a wrapping div since you are just using the inner one, you can simplify it with:

$('<div>', {
   id:"line2" + i,
   html: line_2[i]
}).css("color","blue")
.addClass('letter')
.appendTo(elements);

Rise Ledger · Accepted Answer · 2015-05-28 21:44:31Z

0

Here is the code that do not generate any errors (based on your original code):

for (i = line_2.length-1; i >=0; i--) {
    var heya = "line2" + i;
    $('<div>', {
        html: '<br><br><br><br>' + '<div id= ' + heya +'>' + line_2[i] + '</div>'
    });

    $("#" + heya).css("color","blue")
        .addClass('letter')
        .appendTo(elements);
}

answered May 28, 2015 at 21:44

Rise Ledger

9697 silver badges11 bronze badges

Comments

bjaksic · Accepted Answer · 2015-05-28 22:10:51Z

0

This code removes the sentence and replaces it with colored text:

<span id="line_2">Lazy</span>

function execute() {
    var line2 = $('#line_2');
    var colors = ['blue','red','green','gray'];
    var txt = line2.text();
    line2.empty();
    for (var i = 0; i < txt.length; i++) {
        line2.append('<span style="color: ' + colors[i] + '">' + txt[i] + '</span>');
    }
}
execute();

JsFiddle

answered May 28, 2015 at 22:10

bjaksic

3,3331 gold badge12 silver badges13 bronze badges

Collectives™ on Stack Overflow

Jquery selector variable syntax

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related