Jquery - How to find span inside div by special text and change background of span after it

Question

There is entire html code and TextVar Variable.

TextVar = 1000

How can I find span with ImgStylePicker and change background-color of it if text of before span with Rangeto class is equal with TextVar ?

   <div id="Classified">
        <div class="form-group">
            <div class="row">
                <div class="col-md-9">
                    <span class="Rangefrom">1</span>-<span class="Rangeto">1000</span>
                </div>
                <div class="col-md-3">
                    <span class="ImgStylePicker"></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-9">
                    <span class="Rangefrom">1000</span>-<span class="Rangeto">2000</span>
                </div>
                <div class="col-md-3">
                    <span class="ImgStylePicker"></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-9">
                    <span class="Rangefrom">2000</span>-<span class="Rangeto">3000</span>
                </div>
                <div class="col-md-3">
                    <span class="ImgStylePicker"></span>
                </div>
            </div>
        </div>
    </div>

Answer 1

You can try something like this:

$(".Rangeto:contains(" + TextVar + ")").closest(".row").find(".ImgStylePicker").css("background-color", "yellow")

This will look if any element with the class Rangeto contains the value of TextVar

Demo

 var TextVar = 1000; $(".Rangeto:contains(" + TextVar + ")").closest(".row").find(".ImgStylePicker").css("background-color", "yellow") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Classified"> <div class="form-group"> <div class="row"> <div class="col-md-9"> <span class="Rangefrom">1</span>-<span class="Rangeto">1000</span> </div> <div class="col-md-3"> <span class="ImgStylePicker">s</span> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-9"> <span class="Rangefrom">1000</span>-<span class="Rangeto">2000</span> </div> <div class="col-md-3"> <span class="ImgStylePicker">s</span> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-9"> <span class="Rangefrom">2000</span>-<span class="Rangeto">3000</span> </div> <div class="col-md-3"> <span class="ImgStylePicker">s</span> </div> </div> </div> </div> 

Answer 2

Here a one liner solution, you dont need each() function

 $(document).ready(function(){ var TextVar = 1000 $(".ImgStylePicker").closest(".form-group").find(".Rangeto:contains(" + TextVar + ")").css("background-color", "green") }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Classified"> <div class="form-group"> <div class="row"> <div class="col-md-9"> <span class="Rangefrom">1</span>-<span class="Rangeto">1000</span> </div> <div class="col-md-3"> <span class="ImgStylePicker"></span> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-9"> <span class="Rangefrom">1000</span>-<span class="Rangeto">2000</span> </div> <div class="col-md-3"> <span class="ImgStylePicker"></span> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-9"> <span class="Rangefrom">2000</span>-<span class="Rangeto">3000</span> </div> <div class="col-md-3"> <span class="ImgStylePicker"></span> </div> </div> </div> </div> 

Answer 3

You can try this simple code!

var TextVar = 1000;
$(".Rangeto:contains(" + TextVar + ")").closest(".row").find(".ImgStylePicker").css("background-color", "red");