CODEWITHSUNDEEP
jquery
John
John

Reputation: 3945

Retrieve an element with Jquery

I want to be able to get any element on the page only going by its attached attribute..so for example on a page I have 

 <div id="divId" name="john" style="background-color: red;">
This is alot of text
</div>

I want to get this element and update its background colour...but in any case it might not be a div, with a name it could be a ul and an li...

so for example Iv found an example where I can do:

<div>
    <ul data-continent="North America">
        <li data-species="California condor">Critically Endangered</li>
        <li data-species="American bison">Near Threatened</li>
    </ul>
</div>

and if I say

alert($( "ul[data-continent='" + 'North America' + "'] li[data-species='" + 'California condor'  +"']").html());

this will output 'Critically Endagered'

I want to apply this way of getting an element to my original div...so I have tried

 var e1 = $("div[name='" + 'john' + "']" ).html()
     e1.style.backgroundColor = "lightblue";

this is returning undefined...I know there are other ways to get elements but I want to learnt this way what am i doing wrong

Thank You

Upvotes: 1

Views: 71

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

It can be pretty simple, select by data attribute using a variable:

   var mychoice = "North America";
   var mything =$('*[data-continent="' + mychoice + '"]');

Same with any attribute

Upvotes: 0

j08691
j08691

Reputation: 208002

First off you're unnecessarily concatenating information together. You should be doing something like this:

var e1 = $("div[name='john']" ).html()

The concatenation is really only needed if you're placing a variable in the selector somewhere, which you're not doing. There's also no need for .html() as that would get the HTML content of the div and you just want to change the CSS of the element.

Second, at this point e1 is a jQuery object, so trying to use plain vanialla JavaScript to access properties will fail when you do:

e1.style.backgroundColor

You could use .get(0) or [0] to dereference the jQuery object and access the underlying node like:

e1[0].style.backgroundColor

or

e1.get(0).style.backgroundColor

but the proper way would to continue to use jQuery methods, like .css() in this case:

e1.css('backgroundColor', 'lightblue');

Example:

var e1 = $("div[name='john']")
//e1.get(0).style.backgroundColor = 'lightblue';
//e1[0].style.backgroundColor = 'lightblue';

e1.css('backgroundColor', 'lightblue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divId" name="john" style="background-color: red;">
  This is alot of text
</div>

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

There are two issues in your code.

First is that you get the html with .html(), which returns the actual html text and not the element so you cannot style it.

the following would fix it

var e1 = $("div[name='" + 'john' + "']" ).get(0);
    e1.style.backgroundColor = "lightblue";

Additionally you could use the .css jquery method to style the element.

var e1 = $("div[name='" + 'john' + "']" );
    e1.css({
             'background-color': "lightblue"
           });

Last, if you do not want to limit your self to just div elements, just remove the div from the selector

var e1 = $("[name='" + 'john' + "']" )

and it will select all elements that have name attribute with john as its value.

Upvotes: 0

Related Questions