Question

我正在尝试创建两个子div，其中任何一个单击时都会给“toggler”类子div提供一个“highlight”类。我正在创建一个“toggler”选择器变量，它包含“toggler”类。但是，给定以下代码，两个子div都被赋予“highlight”类，而不仅仅是选择器变量设置为保持的“toggler”类。

HTML：

<div class="parent_div">
  <div class="first_child">
    First Child Text
  </div>
  <div class="toggler">
    Toggler
  </div>
</div>

CSS：

.parent_div > div {
    display: inline-block;
    float: left;
    clear: both;
}

.parent_div > div:hover {
    cursor: pointer;
}

.highlight {
    background-color: yellow;
}

jQuery的：

$(document).ready(function() {
  var toggler = $('.toggler');
  var eitherChild = $('.first_child, .toggler');

  eitherChild.click(function() {
      var thisParent = $(this).parent();
      thisParent.children(toggler).toggleClass('highlight');
  });
});

显示结果的小提琴：http://jsfiddle.net/bronzegate/5yTBP/

将jQuery更改为以下结果会产生所需的结果：

$(document).ready(function() {
  var eitherChild = $('.first_child, .toggler');

  eitherChild.click(function() {
      var thisParent = $(this).parent();
      thisParent.children('.toggler').toggleClass('highlight');
  });
});

显示结果的小提琴：http://jsfiddle.net/bronzegate/ZS8P5/

为什么前一种情况下的Children方法选择两个子项而不仅仅选择“toggler”选择器变量中定义的子项？

Answer 1

children（）函数接受一个选择器：

http://api.jquery.com/children/

.children（[选择器]）

返回： jQuery

说明：让孩子们   匹配元素集中的每个元素的数据，可选地由   选择器。

selector：一个字符串，其中包含一个匹配元素的选择器表达式。

在第一种情况下（错误的一种情况），你传递的是一个失败的对象：

var toggler = $('.toggler');

在第二种情况下，你只传递选择器（'.toggler'），这就是它按预期工作的原因。

Answer 2

因为.children()方法只接受字符串选择器来过滤..而不是元素。

<强>引用

.children( [selector ] )
      的选择
      键入：选择器
      包含选择器表达式的 字符串，用于匹配元素。

您尝试实现的目标可以通过.filter()（ 接受元素或jQuery对象作为参数）完成，但仍然没有意义在这种情况下..

thisParent.children().filter(toggler).toggleClass('highlight');

Answer 3

因为.children()只接受selector而不接受jquery对象

http://api.jquery.com/children/

jQuery Children方法返回意外结果

3 个答案: