Can'；使用jQuery在表行中进行t循环

对每个表行应用给定操作的条件为：

• 包含“关键字”一词
• 输入标记的值属性等于“2”

使用时，它仅对第一行起作用：

$('table.tab-shopping-cart > tbody > tr.hproduct').each(function () {
        var qtty = $('input.basketstep_update').val();
        var product = $('td.col-description a').text().indexOf("keyword"); 
        if (product >=0 && qtty == 2) { 
        $(this).css('background-color','green') // dumb action to the row
        }
})

HTML

关键词
关键词

---

感谢您的帮助

您应该提供一个上下文来限制这些查找者：

var qtty = $('input.basketstep_update', this).val();
var product = $('td.col-description a', this).text().indexOf("keyword");

。。。或者，稍微好一点：

var $row = $(this);
var qtty = $row.find('input.basketstep_update').val();
var isProduct = $row.find('td.col-description a').text().indexOf("keyword") !== -1;
if (isProduct && +qtty === 2) {
  $this.css('background-color','green');
}

否则，将在整个DOM中搜索与选择器匹配的元素，并使用结果的第一个元素（这就是为什么它只适用于第一行-它包含这些第一行）。

我希望这有帮助

  $('table.tab-shopping-cart > tbody > tr.hproduct').each(function () {

         var $currentRow = $(this);
         var qtty = $currentRow .find('input.basketstep_update').val();
         var product = $currentRow .find('td.col-description a').text().indexOf("keyword");

            if (product >=0 && qtty == 2) { 
                $currentRow.css('background-color','green') // dumb action to the row
            }

    })

---

正如您所看到的，使用

this

缺少每个循环的上下文，但是您可以使用回调函数使用

.css（）

：

$（'table.tab-shopping-cart>tbody>tr.hpproduct'）.css（'background-color'，function（））{
var qtty=$（'input.basketstep_update'，this.val（）；
var product=$（'td.col-description a'，this）.text（）.indexOf（“关键字”）；
如果（产品>=0&&QTY==2）{
return'green'//将哑操作返回到行
}
})

关键词
关键词

正确的方法是对

val（）

使用parseInt（），并在

每个

中使用上下文选择器。 在进行此类比较时，请记住使用

==

而不是

=

$('table.tab-shopping-cart > tbody > tr.hproduct').each(function() {
  var qtty = parseInt($(this).find('input.basketstep_update').val(), 10);
  var produitpneu = $(this).find('td.col-description a').text().indexOf("Pneu");
  if (produitpneu !== -1 && qtty === 2) {
    $(this).css('background-color', 'green')
  }
})

---

您应该使用数据来简化代码

$('.tab-shopping-cart .hproduct').each(function() {
  var $row = $(this);
  var qtty = $row.find('.basketstep_update').val();
  if ($row.data('type') === 'pneu' && qtty == 2) {
    $(this).css('background-color', 'green')
  }
})

所以你的HTML看起来像

  <table class="tab-shopping-cart">
    <tbody>
      <tr class="hproduct" data-type="pneu">
        <td class="col-description"><a>Pneu</a></td>
        <td class="col-qty">
          <div>
            <input class="basketstep_update" value="3">
          </div>
        </td>
      </tr>
      <tr class="hproduct" data-type="pneu">
        <td class="col-description"><a>Pneu</a></td>
        <td class="col-qty">
          <div>
            <input class="basketstep_update" value="2">
          </div>
        </td>
      </tr>
    </tbody>
  </table>

Pneu
Pneu

---

另外，避免选择器太严格，比如

table.foo

或者甚至

div.bar>div.foo>div.bar

这太复杂了，你的HTML在将来也不会改变。

这很清楚，谢谢你和所有参与的人。不知道jquery搜索中的上下文参数！

$('.tab-shopping-cart .hproduct').each(function() {
  var $row = $(this);
  var qtty = $row.find('.basketstep_update').val();
  if ($row.data('type') === 'pneu' && qtty == 2) {
    $(this).css('background-color', 'green')
  }
})

  <table class="tab-shopping-cart">
    <tbody>
      <tr class="hproduct" data-type="pneu">
        <td class="col-description"><a>Pneu</a></td>
        <td class="col-qty">
          <div>
            <input class="basketstep_update" value="3">
          </div>
        </td>
      </tr>
      <tr class="hproduct" data-type="pneu">
        <td class="col-description"><a>Pneu</a></td>
        <td class="col-qty">
          <div>
            <input class="basketstep_update" value="2">
          </div>
        </td>
      </tr>
    </tbody>
  </table>