How to change Jquery selector based on an param passed through a function

Question

I have a function:

 function factCheck(index) {

        if (arrayOfSites[index].indexOf("pdf") > -1) {


            $('#20').attr('style', 'color: red');
            $('#' + index).attr('style', 'color: red');

            console.log('index: ' + index);
            console.log($("#" + index).text());

        }
    }

So my question is. The text color of the element changes color when I use $('#20') but when I use, $('#' + index) it doesn't work. Funny thing is, I with console.log.. it logs the text of the element but I can't effect the css of it.

Why is this happening?

// after a three hour meeting.. I came back with some really great answers!! Thank you!!

edit: the code below shows how I'm snagging all the links on the page and add the id equal to the index of that item. So that's why I'm trying to grab that link, and effect it in some way. I appreciate all you guys.. I think I'm going to take the string and add a letter to it as they come in through the function and then manipulate the anchor from that point. I just wonder if there's a more efficient way of doing this.

  $(".lpage a").each(function (index) {

        // console.log(index + ": " + $(this).text());
        str = $(this).attr('href');
        arrayOfSites.push(str);
        str = arrayOfSites[index];

        title = $(this).attr('title');
        parseURL(str);

        $('.colContent2').append(cellOpen + '<a onclick="whichFunction(' + index + ');" id= "' + index + '"style="cursor:pointer;" class="injectedLinkCol2" >' + str + '</a>' + cellClose).prop("id", index);

    });

I can't reproduce the problem. Can you create a stack snippet or jsFiddle that does? — j08691, Feb 24 '16 at 15:23

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

Maybe it has something to do with the name of your id attribute. Take a look at this answer.

edited May 23 '17 at 12:23

Community

1
1

answered Feb 24 '16 at 15:27

tasos

369
1
9

score 0 · Answer 2 · answered Feb 24 '16 at 15:27

0

Try to use the toString() function:

function factCheck(index) {

        if (arrayOfSites[index].indexOf("pdf") > -1) {


            $('#20').attr('style', 'color: red');
            $('#' + index.toString()).attr('style', 'color: red');

            console.log('index: ' + index);
            console.log($( "#" + index.toString() ).text());

        }
    }

answered Feb 24 '16 at 15:27

It is implecitely called when concatening a string – A. Wolff Feb 24 '16 at 15:30

score 0 · Answer 3 · edited May 23 '17 at 11:45

0

An id name or class name must begin with a name must begin with an underscore (_), a hyphen (-), or a letter(a–z).

So something like

'#d20'

would work.

See this: Valid CSS Selectors.

edited May 23 '17 at 11:45

Community

1
1

answered Feb 24 '16 at 15:36

dorado

1,515
1
15
38

score 0 · Answer 4 · answered Feb 24 '16 at 16:35

I couldn't reproduce the exact problem. I made a pen (link) and tried what you asked but it works well. So it must be some error in the remaining code.

on a related note

In CSS id's are not allowed to start with a number(classes are allowed). So writing something like

#20{
    color: red;
}

won't work, but the rule only applies to css. JQuery will still work, which means your only option's are to write inline styles or use JQuery's .attr or .css, but jQuery.attr() will reset all your inline styles. you are left with using .css(). So, it's better to not start your id's with numbers.

try using .css instead of .attr and see if it works.

Dr. Div · Answer 5 · 2016-02-26T15:03:08.917

0

$('.exampleClass:eq(' + index + ')').css("color", "yellow");

for some reason works

$('.exampleClas').eq(index).css("color", "yellow");

does not work.

edited Feb 26 '16 at 15:03

answered Feb 24 '16 at 19:53

Dr. Div

951
14
26

How to change Jquery selector based on an param passed through a function

5 Answers5