Jquery - 如何通过特殊文本查找div内的跨度并更改后面的跨度背景

时间:2017-09-06 06:32:12

标签: javascript jquery

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

TextVar = 1000

如果span类的ImgStylePickerbackground-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}}

3 个答案:

答案 0 :(得分: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;

答案 1 :(得分:0)

这是一个单线解决方案,您不需要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>

答案 2 :(得分:-1)

你可以尝试这个简单的代码!

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