Question

我对jQuery很陌生，所以对我很轻松。

使用以下HTML：

<table border="1">
 <tr>
  <td headers="QTY">
   <input type="hidden" name="f50" value="1">
  </td>
  <td headers="COLOR">
   <input type="text" name="f01">
  </td>
 </tr>
 <tr>
  <td headers="QTY">
   <input type="hidden" name="f50" value="0">
  </td>
  <td headers="COLOR">
   <input type="text" name="f01">
  </td>
 </tr>
</table>

我正在尝试执行以下操作：

每行
查看隐藏项目“f50”
如果值= 1，则将同一行的f01的背景颜色设置为绿色
如果值！= 1，则将同一行的f01的背景颜色设置为黄色

到目前为止，我有这个：

$('input[name="f50"]').each
(
 function(index)
 {
  var theItem = this;

  if (parseInt(theItem.value) == 1)
  {
   alert ('Make Green');
  }
  else
  {
    alert ('Make Yellow');
  }
 }
);

我不确定如何从我所在的位置引用相对f01元素。

非常感谢任何帮助。

干杯

Duncs

Answer 1

如果它们在同一个tr中，您可以使用closest('tr')来查找父tr，并使用find来获取所需元素。

var closestf01 = $(this).closest('tr').find('input[name="f01"]');

然后

closestf01.css('background-color', 'yellow'); // or green

所以

$('input[name="f50"]').each(function(index) {
  var f01 = $(this).closest('tr').find('input[name="f01"]');
  if ($(this).val() == 1)//or this.value == 1
      f01.css('background-color', 'yellow');

  else
      f01.css('background-color', 'green');
});

或“更短”

$('input[name="f50"]').each(function(index) {
      $(this)
            .closest('tr')
            .find('input[name="f01"]')
            .css('background-color', (this.value == 1 ? 'yellow' : 'green'));
});

请参阅jsfiddle

Answer 2

试试这个：

$('input[name="f50"]').each(function() {
  var  this_val = $(this).val();

    if (this_val == 1) {
        alert("Make Green");
        $(this).addClass('green'); 
    } else { 
        alert('Make Yellow'); 
        $(this).addClass('yellow');
    }
});

FIDDLE http://jsfiddle.net/txw66/2/

Answer 3

试试这个

$('input[name="f50"]').each
(
 function(index)
 {
  var theItem = this;

  if (parseInt(theItem.value) == 1)
  {
   $(theItem).parent().next().find('input[name="f01"]').css('background-color','green');
  }
  else
  {
    $(theItem).parent().next().find('input[name="f01"]').css('background-color','yellow');
  }
 }
);

http://jsfiddle.net/HFV9N/

Answer 4

我会尝试：

$('[name="f50"][value="1"]').closest('tr').find('[name="f01"]').css('background-color','green');
$('[name="f50"]:not([value="1"])').closest('tr').find('[name="f01"]').css('background-color','yellow');

正如@RononDex所述，name属性应该是唯一的 - 使用此属性的全局选择器不能保证在所有浏览器中都有效。您应该考虑使用data-blahblah属性，例如<input type="hidden" data-which="f50" value="1" />。

为相对元素设置CSS

4 个答案: