jquery - 根据子隐藏输入值查找 div 并更改 div 上的 CSS 类

Question

我有在 PHP while 循环中生成的 div（类“案例”）。每个 div 包含一个隐藏的输入字段（名称 'case_id），其值为 MySQL DB 中的 case id。

<div class="viewport">
   <ul class="overview">
      <?php
        while ( $row_my_patients = mysql_fetch_assoc( $result_my_patients ) ) {

           echo "<li><div class='case'><img src='images/case_icons/" . $row_my_patients['patient_icon'] . "'  width='44' height='45' /><input name='case_id' type='hidden' value='". $row_my_patients['case_pk'] . "' /></div></li>";

        }
      ?>
   </ul>
</div>

现在，我想找到具有“case”类的 div，该 div 包含一个隐藏输入，其值与$('#active_case').val();该addClass('active')div 匹配。

我怎样才能做到这一点？

Answer 1

你可以试试这个：

$('.case').addClass(function(){
    if($(this).children('input').val() == $('#active_case').val()) return 'active';
})

如果它符合条件，它会添加类，否则它只是忽略它。

Answer 2

您可以执行以下操作：

var val = $.trim($('#active_case').val());

$('.case').filter(function(idx, el){
    return val == $.trim($(this).find(':hidden').val())
}).addClass('active');

演示：小提琴

Answer 3

尝试这个

$('input[name="case_id"]').each(function(){
    if($(this).val() == $('#active_case').val()){
        $(this).parent('div').addClass('active');
    }
});

演示 http://jsfiddle.net/yeyene/trBN4/

Answer 4

//run through each div with class case
$('.case').each(function(i,elem){ 
  //compare the input field of each div to the value 'active_case'
  if($(elem).children('input').val() === $('#active_case').val()) { 
    //add class to current element (div) if child input === 'active case'
    $(elem).addClass('active');
  }
});