如何使用jquery获取div的文本并设置元素的背景颜色

Question

$(".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

Answer 1

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>

Answer 2

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... });