CODEWITHSUNDEEP
javascriptjquerycssbackground
Shubh Sheth
Shubh Sheth

Reputation: 431

How to get text of div and set in background color of element using jquery

$(".child").css("background-color", $(".child div").val());


<div class="flexbox" id="flexbox">
    <div class="child">
        <div>#69d2e7</div> 
    </div>
</div>

I am trying to get the value and make it background-color of that element but i don't know what's wrong

Upvotes: 0

Views: 111

Answers (2)

Sarel Esterhuizen
Sarel Esterhuizen

Reputation: 1688

Make sure that you are referencing the script file correctly and that it is truly in the root of your project. If not use relative paths to specify the location. Something like:

<script src="<%= Url.Content("~/scripts/jquery-1.3.2js") %>" type="text/javascript"></script>

Then it does not appear like you are actually calling the document ready function that prevents jquery from running before the document is loaded.

$(document).ready(function(){ // jQuery methods go here... });

Upvotes: 0

Mohammad
Mohammad

Reputation: 21489

The .val() method is primarily used to get the values of form elements such as input, select and textarea.

You need to use .text() to getting text of div tag.

$(".child").css("background-color", $(".child div").text());

If you have multiple .child in your document you need to use bottom code

$(".child").each(function(){
    $(this).css("background-color", $("div", this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexbox" id="flexbox">
    <div class="child">
        <div>#69d2e7</div> 
    </div>
    <div class="child">
        <div>red</div> 
    </div>
    <div class="child">
        <div>green</div> 
    </div>
</div>

Upvotes: 1

Related Questions