Question

i tried to do this :

var selec = $("li:Contains('"+ $("#main").val() +"')");
selec.eq(1).addClass("virtual");

And my css :

.virtual
{
    backgroung:red;
    color:white;
}

And html looks something like this

<input type="text" id="main" />
<div id="bottom-div">
<ol>
    <li>Content1</li>
    <li>Content2</li>
    <li>Content3</li>
    <li>Content4</li>
    <li>Content5</li>
    <li>Content6</li>
    <li>Content7</li>
    <li>Content8</li>
    <li>Content9</li>
    <li>Content10</li>
    <li>Content11</li>
    <li>Content12</li>
    <li>Content13</li>
</ol>
</div>
<div id="apparent-div">Apparent div</div>
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
<div id="key"></div>

The javascript perfectly shows the content i want but it doesnt adds the class to it why ?

Where have i been going wrong ?

Answer 1

It appears to work, you had an error in your CSS:

.virtual
{
    backgroung:red; //Was mispelled
    color:white;
}

should be:

.virtual
{
    background:red;
    color:white;
}

The following isn’t apparently the cause of the problem 🙂 :

and you had Contains as opposed to contains in your Javascript.

var selec = $("li:Contains('"+ $("#main").val() +"')");

should be:

var selec = $("li:contains('"+ $("#main").val() +"')");