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");