Why was not executed?

Question

Html contains a <p> element with text Sample

Script Contains

var aVar = 'Sample';

if ( $( "p:contains(aVar)" ) ) {

    console.log("-------start--------")

    if(true){

        console.log("from here..............")
        console.log("aVar="+aVar)
        $( "p:contains(aVar)" ).after(<p>12345</p>); //was not executed

    }
}

The output which i get is

-------start--------
from here..............
aVar=Sample

Why was not executed?

$( "p:contains(aVar)" ) - you cannot access the element this way — Hudhaifa Yoosuf, Dec 04 '16 at 09:18
`aVar` is a variable so your jQuery selection should be concatinated so as not to be interpreted as the literal string "aVar". Furthermore, the `:contains()` method requires the search term to be quoted. Giving `$("p:contains('”+aVar+"')")`. — Moob, Dec 04 '16 at 09:42
Note that `if ( $( "p:contains(aVar)" ) )` is always true, regardless of whether the element exists or not. If you want to [check if an element exists](http://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery), it's `if ( $( "p:contains(aVar)" ).length )`. — JJJ, Dec 04 '16 at 09:55

score 3 · Accepted Answer · edited May 23 '17 at 12:24

3

$( "p:contains(aVar)" ).after(<p>12345</p>)

The variable aVar used in $() is in quotes so will not be interpreted (unless you're looking for the literal text "aVar").

The argument used with .after() isn't quoted properly.

Perhaps something like this:

$( "p:contains("+aVar+")" ).after("<p>12345</p>");

(There are other places where you try to use a variable from inside a string. Those will have to be fixed as well.)

As @xShirase points out, you might also be able to use template literals:

$( `p:contains(${aVar})` ).after("<p>12345</p>");

Those this is unavailable in older browsers including IE and Android.

edited May 23 '17 at 12:24

Community

1
1

answered Dec 04 '16 at 09:20

Ouroborus

16,237
4
39
62

How about `p:contains(${aVar})` between backticks? – xShirase Dec 04 '16 at 09:23
but Javascript does now, and ES6 is pretty well supported `var foo = "bar";console.log(`this is foo${foo}`)` works in all browsers (backticks around the string... dunno how to do that in comments) – xShirase Dec 04 '16 at 09:29
@xShirase "Recent versions of most browsers" is not the same as "all browsers". http://kangax.github.io/compat-table/es6/ But, yes, that would work if you can ignore IE and Android. – Ouroborus Dec 04 '16 at 09:39

score 2 · Answer 2 · answered Dec 04 '16 at 09:19

2

You have some typo..

var aVar = 'Sample';

if ( $( "p:contains(" + aVar + ")" ) ) {
    console.log("-------start--------")
    if(true){

        console.log("from here..............")
        console.log("aVar=" + aVar)
        $( "p:contains("+aVar+")" ).after("<p>12345</p>"); //was not executed

    }
}

Demo

answered Dec 04 '16 at 09:19

Ferrmolina

2,737
2
30
46

It's good that you have included a demo and that your solution clearly works but you should consider fleshing out your answer to include some information about why your solution works. "You have some typo" is not particularly helpful to future visitors having similar problems. – Moob Dec 04 '16 at 09:54

Rocky Sims · Answer 3 · 2016-12-04T10:04:50.263

0

change

$( "p:contains(aVar)" ).after(<p>12345</p>); //was not executed

to

$( "p:contains("+aVar+")" ).after('<p>12345</p>');

Specifically, you are missing an open/close quote on the parameter to after().

edited Dec 04 '16 at 10:04

answered Dec 04 '16 at 09:20

Rocky Sims

3,523
1
14
19

1

Pretty sure `aVar` is a variable. Consider updating your answer to reflect that. `$("p:contains('”+aVar+"')")`. You should also try to give some explanation as to how and why your code solves the OP's problem. – Moob Dec 04 '16 at 09:48

Why was not executed?

3 Answers3