jQuery 选择器未按预期运行

Question

我遇到了一些 jQuery 代码的问题。我无法让选择器正常工作。选择器应该用div except 包装我页面上的所有inputs checkboxes 和radios。这是我用来尝试完成此操作的 jQuery 选择器：

//Wrap input tags in col-sm-9
$("#custom-form-builder input[type!=radio], input[type!=checkbox]").not('#custom-form-builder .datepickercontroller').wrap('<div class="col-sm-9">');

这是我的 HTML 代码：

<div class="form-group required checkboxerrr">
    <label class="col-sm-3 control-label">Multiselect</label>
    <div class="col-sm-9 control-class">
        <div class="checkbox check-info">
          <input type="checkbox" checked="checked" value="1" id="checkbox5">
          <label for="checkbox5" class="no-asterisk">Action</label>
        </div>
        <div class="checkbox check-info">
          <input type="checkbox" checked="checked" value="1" id="checkbox6">
          <label for="checkbox6" class="no-asterisk">Mark as read</label>
        </div>
    </div>
</div>

在这个 jQuery 选择器执行之后，radios 没有被包裹在这个：<div class="col-sm-9"> 中。但是，我的checkboxes 是。这是执行 jQuery 选择器后的最终 HTML：

<div class="form-group required checkboxerrr">
<label class="col-sm-3 control-label">Multiselect</label>
<div class="control-class col-sm-9">
    <div class="checkbox check-info">
      <div class="col-sm-9"><input type="checkbox" checked="checked" value="1" id="checkbox5"></div>
      <label for="checkbox5" class="no-asterisk col-sm-3 control-label">Action</label>
    </div>
    <div class="checkbox check-info">
      <div class="col-sm-9"><input type="checkbox" checked="checked" value="1" id="checkbox6"></div>
      <label for="checkbox6" class="no-asterisk col-sm-3 control-label">Mark as read</label>
    </div>
</div>

感谢任何帮助！

Answer 1

您的选择器对输入类型无效。您必须使用not 选择器。

$("#custom-form-builder input:not[type=radio], input:not[type=checkbox]").not('#custom-form-builder .datepickercontroller').wrap('<div class="col-sm-9">');

Answer 2

根据您的原始代码，我猜您希望输入元素满足以下条件：

• #custom-form-builder 的后代
• 既不是复选框也不是单选元素
• 没有类datepickercontrol

但是，您的选择器 "#custom-form-builder input[type!=radio], input[type!=checkbox]" 有点问题（就逻辑而言），因为它：

1. 忽略#custom-form-builder 中的非无线电输入，但是
2. 忽略整个 HTML 文档中的非复选框输入

---

有几种方法可以做到这一点。

使用.not()，一个jQuery方法

使用.not() 的优点是您始终可以通过链接其他方法访问父元素和/或执行 jQuery 中缓存元素的 DOM 遍历。

$("#custom-form-builder :input")
.not('input[type="checkbox"], input[type="text"], .datepickercontrol')
.wrap('<div class="col-sm-9" />');

奖励：使用.filter()，一种 jQuery 方法

.filter() 函数允许您有条件地删除最初由选择器获取的项目。然后，您可以将此函数之后的链接方法应用于过滤后的元素子集。这种方法对于简单的应用程序来说可能听起来很冗长，但对于复杂的条件过滤非常有用。

$("#custom-form-builder :input")
.filter(function() {
    return ($(this).attr('type') != 'checkbox' && $(this).attr('type') != 'radio' && !$(this).hasClass('.datepickercontrol'));
})
.wrap('<div class="col-sm-9" />');

Answer 3

你的代码语法错误试试这个：

$("#custom-form-builder").not('input[type=radio]').not('input[type=checkbox]')not('#custom-form-builder .datepickercontroller').wrap('<div class="col-sm-9">');