Question

将给定操作应用于每个表行的条件是：

包含“keyword”一词
值属性等于“2”

使用this code，它仅适用于 第一个 行：

$('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

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

感谢您的帮助

Answer 1

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

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以查找与选择器匹配的元素，并且将使用结果的第一个元素（这就是为什么它仅适用于第一行 - 它包含那些首字母）。

Answer 2

我希望这有助于这个

  $('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
            }

    })

Answer 3

Try with below code:
$('table.tab-shopping-cart > tbody > tr.hproduct').each(function () {
        var qtty = $(this).find('input.basketstep_update').attr('value');
        var product = $("td.col-description a:contains('keyword')"); 
        if (product && qtty == 2) { 
            $(this).css('background-color','green') // dumb action to the row
        }
})

Answer 4

正如您所看到的，您错过了使用this的每个循环的上下文，但您可以使用回调函数与.css()一起使用：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tab-shopping-cart">
  <tbody>
    <tr class="hproduct">
      <td class="col-description"><a>keyword</a>
      </td>
      <td class="col-qty">
        <div>
          <input class="basketstep_update" value="3">
        </div>
      </td>
    </tr>
    <tr class="hproduct">
      <td class="col-description"><a>keyword</a>
      </td>
      <td class="col-qty">
        <div>
          <input class="basketstep_update" value="2">
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 5

正确的方法是使用val()的parseInt（）并使用each中的上下文选择器。另外，请记住在进行此类比较时使用===而不是==。

$('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')
  }
})

Answer 6

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

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

此外，避免选择器过于严格，例如table.foo甚至div.bar > div.foo > div.bar它太复杂了，而且您的HTML将来也无法更改。

无法使用jQuery在Table Rows中循环

6 个答案: