How to Use JavaScript Variables in Jquery Selectors

How to use JavaScript variables in jQuery selectors?

var name = this.name;
$("input[name=" + name + "]").hide();

OR you can do something like this.

var id = this.id;
$('#' + id).hide();

OR you can give some effect also.

$("#" + this.id).slideUp();

If you want to remove the entire element permanently form the page.

$("#" + this.id).remove();

You can also use it in this also.

$("#" + this.id).slideUp('slow', function (){
    $("#" + this.id).remove();
});

How can i use a variable in a Jquery selector?

You don't need to use .find() because id attribute is unique in document and you can use jquery $() selector to selecting it.

$('#Scope_' + scope).prop("checked", true);

However if you want to use .find() change your code to bottom code

$('#frmEditPagevar').find('input[id="Scope_'+ scope +'"]').prop("checked", true);
// or
$('#frmEditPagevar').find('#Scope_'+ scope).prop("checked", true);

How to use a variable in a Jquery selector

Try

$('#myValue'+myVariable+'1').val("Hello World!");

You needed the extra quotes to terminate the strings.

using variables within a jquery selector

Assuming var section_id = 'section_1' this:

$('#'+ section_id + ' ul').children().size();

will give you

$('#section_1 ul').children().size();

and yes, this is valid as well. It will give you all ul elements within #section_1 element (no matter how deep they would be). Probably you'll get array of elements and calling .children() on it is also fine. It should all work.

jQuery: using a variable as a selector

You're thinking too complicated. It's actually just $('#'+openaddress).

How to store jQuery selector in a variable?

The variables in the second piece of code contain jQuery objects which wrap the DOM Elements.

So if you wanted to set innerHTML property you could use the jQuery function .html().

$consoleDisplayHTML.html(messages.pop().content);
$watchedFolderHTML.html(watchedFolder);

If you want to assign yourself the inner HTML to the Dom Elements you can extract the wrapped element from the jQuery object and set it to the innerHTML property.

$consoleDisplayHTML.get(0).innerHTML = messages.pop().content;
$watchedFolderHTML.get(0).innerHTML = watchedFolder;

In regard to your edit: there could be a number of reasons the above snippets don't work. Usually for this kind of problem if you execute that code directly in <head> without surrounding it in a document ready callback the code will be executed as soon as it is reached by the browser but the elements in the DOM are not yet created. To avoid usage of a callback you may try to move to the bottom of the page the javascript code you wrote for example.

Here's a good old document ready callback:

jQuery(function ($) {
    var $consoleDisplayHTML = $('#consoleDisplay');
    var $watchedFolderHTML = $('#watchedFolder');

    $consoleDisplayHTML.html(messages.pop().content);
    $watchedFolderHTML.html(watchedFolder);
});

jQuery selectors with variables

Edit: Based on your comment below, you would use this:

$('#one img.'+id)

In your question you have a space between img and the .class, I've simply removed that so you get img.className or img.'+className

With the introduction of template literals in ECMAScript 2015, you can also do

$(`#one img.${id}`)

How to Use JavaScript Variables in Jquery Selectors