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> ？

{{1}}

Answer 1

您可以尝试这样的事情：

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

这将查看类Rangeto的任何元素是否包含值TextVar

<强>演示

＆＃13;

＆＃13;

var TextVar = 1000;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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