仅在父ID为=的div上运行代码

时间:2018-05-23 22:06:38

标签: javascript jquery

尝试让这段代码在div上运行" flow-hold"具有父名称" holder1"而不是任何其他具有相同名称的div。



$('.flow-hold').each(function() {
  if (parseInt($(this).text()) >= 50 && ($(this).text()) <= 600) {
    $(this).css("background-color", "green");

  } else if (parseInt($(this).text()) >= 601 && ($(this).text()) <= 1000) {
    $(this).css("background-color", "yellow");

  } else if (parseInt($(this).text()) >= 1001 && ($(this).text()) <= 4000) {
    $(this).css("background-color", "red");

  } else {
    $(this).css("background-color", "transparent");
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="flow-hold">100</div>
<div class="flow-hold">500</div>
<div class="holder1">
  <div class="flow-hold">1000</div>
</div>
<div class="holder2">
  <div class="flow-hold">3000</div>
  <div class="flow-hold">5000</div>
</div>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:1)

试试$('.holder1 > .flow-hold')。这将选择.holder .flow-hold的所有直接子女:

$('.holder1 > .flow-hold').each(function(){
  if (parseInt($(this).text()) >= 50 && ($(this).text()) <= 600){
    $(this).css("background-color","green");
  }   
  else if (parseInt($(this).text()) >= 601 && ($(this).text()) <= 1000) {
    $(this).css("background-color","yellow");
  }
  else if (parseInt($(this).text()) >= 1001 && ($(this).text()) <= 4000) {
    $(this).css("background-color","red");
  }   
  else {    
    $(this).css("background-color","transparent");
    }   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="flow-hold">100</div>
<div class="flow-hold">500</div>
<div class="holder1">
<div class="flow-hold">1000</div>
</div>
<div class="holder2">
<div class="flow-hold">3000</div>
<div class="flow-hold">5000</div>
</div>

答案 1 :(得分:1)

如果$('.holder1 > .flow-hold').each(...)元素需要是.flow-hold直接子元素,则可以将选择器更改为.holder1

$('.holder1 > .flow-hold').each(function(idx, el) {
  var amount = parseInt($(el).text());
  
  if ( amount >= 50 && amount <= 600) {
    $(this).css("background-color", "green");

  } else if (amount >= 601 && amount <= 1000) {
    $(this).css("background-color", "yellow");

  } else if (amount >= 1001 && amount <= 4000) {
    $(this).css("background-color", "red");

  } else {
    $(this).css("background-color", "transparent");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="flow-hold">100</div>
<div class="flow-hold">500</div>
<div class="holder1">
  <div class="flow-hold">1000</div>
</div>
<div class="holder2">
  <div class="flow-hold">3000</div>
  <div class="flow-hold">5000</div>
</div>

其他,如果$('.holder1 .flow-hold').each(...)元素可以是.flow-hold的后代(直接与否),请使用.holder1

$('.holder1 .flow-hold').each(function(idx, el) {
   var amount = parseInt($(el).text());
  
  if ( amount >= 50 && amount <= 600) {
    $(this).css("background-color", "green");

  } else if (amount >= 601 && amount <= 1000) {
    $(this).css("background-color", "yellow");

  } else if (amount >= 1001 && amount <= 4000) {
    $(this).css("background-color", "red");

  } else {
    $(this).css("background-color", "transparent");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="flow-hold">100</div>
<div class="flow-hold">500</div>
<div class="holder1">
  <div class="intermediate">
    <div class="flow-hold">1000</div>
  </div>
</div>
<div class="holder2">
  <div class="flow-hold">3000</div>
  <div class="flow-hold">5000</div>
</div>

答案 2 :(得分:0)

使用此选择器

$('.holder1 .flow-hold').each(...)

答案 3 :(得分:0)

而不是$('.flow-hold')使用 $("parentSelector").find("childSelector") ,而不是:

&#13;
&#13;
const colors = {
  50: "transparent",
  600: "green",
  1000: "yellow",
  4000: "red"
};

$(".holder1").find('.flow-hold').css("background-color", function() {
  const n = parseInt($(this).text(), 10);
  return colors[Object.keys(colors).find(v=>n<=v)];
});
&#13;
<div class="flow-hold">100</div>
<div class="flow-hold">500</div>
<div class="holder1">
  <div class="flow-hold">1000</div>
</div>
<div class="holder2">
  <div class="flow-hold">3000</div>
  <div class="flow-hold">5000</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
&#13;
&#13;
&#13;