jQuery 选择器未按预期运行

Question

我运行遇到了一些 jQuery 代码的问题。我无法让选择器正常工作。选择器假设用 div 除了 checkboxes 和 radios 之外的 包装我页面上的所有 input。这是我用来尝试完成此操作的 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
既不是复选框也不是单选元素
没有 class datepickercontrol

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

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

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

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

使用 .not() 的优点是您始终可以访问父元素 and/or 通过链接其他方法对 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 选择器未按预期运行

jQuery Selector Not Functioning as Expected

html

javascript

css

jquery

jquery-selectors