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

Question

试图让这段代码在具有父名“holder1”的div“flow-hold”上运行，而不是在任何其他具有相同名称的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");
  }
});

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

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

Answer 2

如果$('.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>

Answer 3

使用此选择器

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

Answer 4

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

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)];
});

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