循环中的 jQuery 类选择器

jquery class selector inside a loop

本文关键字：选择器 jQuery 循环      更新时间：2023-09-26

我对jquery中的表达式有一个简单的问题，以选择一个涉及for循环的类。基本上，我有两个步骤：1. 生成一些带有循环的 html 表。2. 使用 jQuery 取消隐藏它们。

以下是简化的代码1. 生成 html 表（我将添加一个循环索引来分隔每个循环创建的表）：2. 第二步的关键部分是取消隐藏生成的表。我的选择器写成：method_options_1'+i+'，其中 i 是一个 for 循环索引。

for (var i = 2; i <= 5; i++) {
  <tr class="method_options_1'+i+'" style="display: none;"><th><label for="id_CAM_1">Chemical application Method (CAM):</label></th>
      <td><select name="CAM_1_'+i+'" id="id_1_'+i+'">
        <option value="2">2-Interception based on crop canopy</option>
        <option value="9">9-Linear foliar based on crop canop</option></select>
      </td></tr>
  $('.method_options_1'+i).closest('tr').show();  
}

但是，此选择器不起作用，这意味着我无法显示隐藏的元素。同时，如果我从 HTML 和 jquery 中删除索引 i，选择器就可以工作了。由于我必须保留 i 索引，任何人都可以给我一些建议（我试图删除 closest（'tr'），但它不起作用）？

'.method_options_1'+i 已经是一个tr，所以首先尝试删除closest('tr')步骤：

$('.method_options_1'+i).show();

请参阅 http://jsfiddle.net/WJDCm/

这是因为就Javascript而言，name只是一个字符串：method_options_1'+i'。它不计算该字符串中的任何代码。如果要正确执行此操作，请执行如下操作：

.HTML：

<tr class="method_options">etc</tr>

Javascript：

$('.method_options:eq('+i+')').show();

编辑：

也许我误会了。您是在 Javascript for 循环中生成此变量的，因此i是代码空间中的有效变量。如果是这种情况，那么你只需要拿出closest()，因为它告诉jQuery沿着DOM向上移动并选择它找到的第一个tr。在这种情况下，这似乎什么都不是。您希望处理所选tr，而不是所选tr的父级。

我真的很想知道你是如何运行上面的代码的......但是这样做确实有效

.HTML：

 ​<table id='myTable'>
 </table>​​​​​​​​

JavaScript：

$(function(){
  for (var i = 2; i <= 5; i++) {
     $('#myTable').append('<tr class="method_options_1'+i+'" style="display: none;"><th><label for="id_CAM_1">Chemical application Method (CAM):</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'">        <option value="2">2-Interception based on crop canopy</option>        <option value="9">9-Linear foliar based on crop canop</option></select>      </td></tr>');

     $('.method_options_1'+i).closest('tr').toggle('slow');   
  }

})

溶液

相关文章：