jQuery遍历 - 查找当前输入的先前标签

Question

只是一个简单的问题，因为我没有长时间使用jQuery。

在这种情况下，是否有更简洁/更快捷的方式来获取标签的html。

这是一个愚蠢的版本作为例子，

<tr>
   <td>
       <label>Please fill in name:</label>
   </td>
   <td>
       <input type="text" id="txtName" class="validate" />
   </td>
</tr>
<tr>
   <td>
       <label>Date of Birth:</label>
   </td>
   <td>
       <input type="text" id="txtDOB" class="validate" />
   </td>
</tr>

这是我正在使用的jquery片段，用于获取标签的html。

$(document).ready(function(){
   $('.validate').each(function(){
      if(!$(this).val())
      {
          var label = $(this).parent().prev().find('label').html();
          alert(label);
      }
   }); 
});

任何想法都表示赞赏

Answer 1

是的，通过使用Closest()而不是Parent()，还有另一种巧妙的方法

请考虑以下代码：

$(document).ready(function(){
   $('.validate').each(function(){
      if(!$(this).val())
      {
          var label = $(this).closest("tr").find('label').html();
          alert(label);
      }
   }); 
});

Closest()：获取与选择器匹配的第一个元素，从当前元素开始并逐步向上遍历DOM树。

Answer 2

我会将此作为答案添加，即使它是您的问题的一种转移：

您对非表格数据使用基于表格的布局，您应该具有如下布局

<div>
<label>Please fill in name:</label>
<input type="text" id="txtName" class="validate" />
</div>
<div>
<label>Date of Birth:</label>
<input type="text" id="txtDOB" class="validate" />
</div>

在这种情况下，jQuery变得非常简单：

$('.validate').each(function(){
      if(!$(this).val())
      {
          var label = $(this).prev('label').html();
          alert(label);
      }
   }); 

实例：http://jsfiddle.net/MDFEm/

Answer 3

是的，你可以稍微缩短它：

$(document).ready(function(){
   $('.validate').each(function(){
      if(!$(this).val())
      {
          var label = $(this).parents('tr').find('label').html(); 
          alert(label);
      }
   }); 
});

Answer 4

你应该在标签上使用'for'属性，不仅它是语义/可访问的，它还为你提供了一个更短的选择器：

<table>
  <tr>
      <td>
        <label for="txtName">Please fill in name:</label>
      </td>
      <td>
        <input type="text" id="txtName" class="validate" />
      </td>
  </tr>
  <tr>
      <td>
        <label for="txtDOB">Date of Birth:</label>
      </td>
      <td>
        <input type="text" id="txtDOB" class="validate" />
      </td>
  </tr>
</table>

$(document).ready(function(){
  $('.validate').each(function(){
    if(!$(this).val())
    {
      var label = $('label[for="'+$(this).attr('id')+'"]').html();
      alert(label);
    }
  }); 
});​

Answer 5

我用这个;

<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){

if($(this).val() == "A")    
var label = $(this).parent().prev("label").text();
alert(label);

});
});
</script>