jQuery .next() 在表格中不起作用

Posted

技术标签:

【中文标题】jQuery .next() 在表格中不起作用【英文标题】:jQuery .next() not working when in table 【发布时间】:2011-11-10 18:32:03 【问题描述】:

我有一组复选框,每个复选框都有一个与之关联的下拉菜单。当用户单击复选框时,复选框值及其下拉列表将发送到服务器。

我最初将每个都放在 ul 中,但将其更改为表格以保持下拉列表对齐。在我这样做之后,下一个功能停止工作。请求中的 var 甚至消失了。如果我硬编码一个值,它会显示备份。

函数如下:

$(document).delegate('.cbxAmenity', 'click', function() 
    $("#dialogNotify").append(" Saving...").dialog();

    var thisAmenity = (this.id).replace("AmenityList_", "");

    $.ajax(
        url: 'ajax_url.php',
        dataType: 'json',
        data: 
            ResortId: $("#id").val(),
            action: 'save',
            amenity: thisAmenity,
            locality: $(this).next().val() // if i change to 'foo' it works
        ,
        success: function() 
            $("#dialogNotify").dialog("close");
            ui.amenityDialog();
        ,
        error: function() 
            $("#dialogNotify").html("There was an error saving amenity");
        
    );

编辑:这是表格...它由另一个 ajax 调用生成:

$("#dialogAmenity").html("<table id='amenityList'><tr><th>Amenity</th><th>Locality</th></tr>");
                for(var index=0; index<amenities.length; index++) 
                    $("#amenityList").append("<tr><td><input type='checkbox' name='AmenityList_"+
                                             amenities[index].AmenitiesID + "' id='AmenityList_"+
                                             amenities[index].AmenitiesID + "' class='cbxAmenity' /> "+
                                             amenities[index].Name +
                                             "</td><td><select id='locality' name='locality'>"+
                                             "<option value='RESORT'>Resort</option>" +
                                             "<option value='NEARBY'>Near by</option>" + 
                                             "</select></td></tr>");

                    if (amenities[index].link == true)
                        $("#AmenityList_"+amenities[index].AmenitiesID).prop('checked', true);

                
                $("#dialogAmenity").append("</table>");

再次编辑:这是 Firebug 的 html

<table id="amenityList">
  <tbody>
    <tr>
      <th>Amenity</th>
      <th>Locality</th>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_1" id="AmenityList_1" class="cbxAmenity" type="checkbox"> Indoor Pool
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_2" id="AmenityList_2" class="cbxAmenity" type="checkbox"> Fitness Gym
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_3" id="AmenityList_3" class="cbxAmenity" type="checkbox"> Beach Access
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_4" id="AmenityList_4" class="cbxAmenity" type="checkbox"> Laundry Room
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】:

你能发布table的html吗? 这是一个创建表格的脚本。你能展示一个最终创建的表格的例子吗? @greg,刚刚又更新了表格代码 【参考方案1】:

cbxAminity 类的元素是&lt;td&gt; 标记中的最后一个元素。因此,它没有next() 元素。你需要做的

$(this).parent().next().find('select').val();

为了在下一个&lt;td&gt;中找到&lt;select&gt;元素。

【讨论】:

做到了。我想知道在 td 容器内是否有影响,但不知道如何摆脱它,哈哈……谢谢 +1 有趣的是,在我回答这个问题之前,我看到另一个问题与相同的问题。【参考方案2】:

您的表创建脚本包含一个缺陷。你不能以这种方式附加结束标签$(...).append("&lt;/table&gt;")

  var html = "<table id='amenityList'><tr><th>Amenity</th><th>Locality</th></tr>");
  for(var index=0; index<amenities.length; index++) 
     html += "<tr><td><input type='checkbox' name='AmenityList_"+
             amenities[index].AmenitiesID + "' id='AmenityList_"+
             amenities[index].AmenitiesID + "' class='cbxAmenity'" +

             (amenities[index].link == true ? "checked='checked'" : "") + 

             "/> "+
             amenities[index].Name +
             "</td><td><select id='locality' name='locality'>"+
             "<option value='RESORT'>Resort</option>" +
             "<option value='NEARBY'>Near by</option>" + 
             "</select></td></tr>");

   
   html += "</table>";
   $("#dialogAmenity").html(html);

【讨论】:

当我添加 $firebug 时有这样的说法:$(this.id).replace 不是函数url 第 374 行 @guyfromfl 我明白了。别介意我的第一个建议,删除这些括号,因为它们已经过时了。相反,请查看我建议的表格生成代码。 已将其更改为您的建议,但仍然没有创建该 var。 保留建议的更改,因为它需要正常运行。你能显示元素.cbxAminity的HTML吗? 是的,确实保留了更改,因为它更有意义..一些浏览器假定关闭标签等...会将 .cbxAminity 编辑到我的 OP

以上是关于jQuery .next() 在表格中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

.next() 和 .addClass() 在 jquery 中不起作用

jquery next plus 切换不起作用。这是一个错误吗?

jQuery 函数在 Chrome 中不起作用

Javascript/ jQuery:以 CSV 格式导出数据在 IE 中不起作用

为啥文本颜色在 Tailwind css + next.js 项目中不起作用

Next.JS Redux 调度在 getStaticProps() 中不起作用