Question

我遇到了一些jQuery代码的问题。我无法使选择器正常运行。选择器假设我的页面上的所有input都包含div 除以外的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").not('input[type=radio]').not('input[type=checkbox]')not('#custom-form-builder .datepickercontroller').wrap('<div class="col-sm-9">');

Answer 3

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

#custom-form-builder
既不是复选框也不是无线电元素
没有班级datepickercontrol

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

忽略#custom-form-builder中的非无线电输入，但
忽略整个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" />');

jQuery选择器无法按预期运行

3 个答案: