jQuery-如何通过特殊文本在div中查找跨度并在其后更改跨度背景

Question

有完整的html代码和TextVar变量。

TextVar = 1000

我如何才能找到span与ImgStylePicker ，改变background-color的，如果前跨度的文字Rangeto类是相等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

您可以尝试如下操作：

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

这会看，如果与类的元素Rangeto包含的价值TextVar

演示版

 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

这里是一个线性解决方案，您不需要each()函数

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

您可以尝试这个简单的代码！

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