Question

我需要一次为函数选择多个元素。我有

的jQuery

$('[class^="shapeLeft"]').click(function(){
  var $parent = $(this).parent()
  var $both   = $(this, 'this + div[class^="shapeRight"]')
  $both.css({'height': parent.height() + 20})
})

HTML

<div class="shapeLeftDiamond"></div>
<div class="shapeRightDiamond"></div>

我说$(this, 'this + div[class^="shapeRight"]')的部分似乎不起作用。点击的元素确实改变了它的高度，但它与以shapeRight开头的类的直接邻居不会。

如何一次性选择点击的元素和其shapeRight兄弟？

由于

Answer 1

从this开始，以下是如何找到与选择器匹配的所有兄弟姐妹：

var allSiblings = $(this).siblings("the-selector-here");

以下是如何找到以下兄弟姐妹的所有内容：

var allSiblings = $(this).nextAll("the-selector-here");

以下是如何找到可能不相邻的兄弟姐妹之后的一个：

var allSiblings = $(this).nextAll("the-selector-here").first();

更多the API documentation。

从你的小提琴中，我不知道你想要哪一个，但在a comment你说过：

我想写一些会选择很多元素的东西。

...这让我觉得你想要nextAll（没有first）。然后是this comment：

我需要在此之后选择元素并同时

...这意味着您还需要.add(this)：

＆＃13;

$(".shapeLeftDiamond").click(function() {
  var parent = $(this).parent();
  var thisShape = $(this).nextAll("div[class^='shapeRight']").add(this);
  thisShape.height(parent.height() + 20);
})

＆＃13;

main {
  height: 200px;
  width: 200px;
  background-color: #F13;
}
.shapeLeftDiamond {
  float: left;
  width: 80px;
  height: 50px;
  background-color: #FF0;
}
.shapeRightDiamond {
  float: right;
  width: 80px;
  height: 50px;
  background-color: #0FF;
}

＆＃13;

<main>
  <div class="shapeLeftDiamond">Click me</div>
  <div class="shapeRightDiamond">Should also grow</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

您需要从选择器中移除this（this在CSS选择器中没有意义）并更改参数的顺序。 selector string comes first，后跟上下文：

$(".shapeLeftDiamond").click(function(){
    var parent = $(this).parent();
    var thisShape = $("+ div[class^='shapeRight']", this);
    thisShape.height(parent.height() + 20);
});

修改：如果您希望这两个元素都增长，请使用.add()：

thisShape.add(this).height(parent.height() + 20);

https://jsfiddle.net/qukkwvL1/4/

Answer 3

如果它是以下确切的节点，则使用.next()

var thisShape = $(this).next().addBack();

或使用.siblings()如果他们共享相同的父级，但可能在他们之间的DOM中有其他元素

var thisShape = $(this).siblings('[class^="shapeRight"]').addBack();

在这两种情况下，您还需要在结尾处添加.addBack()，以便在选择中包含当前元素（您的案例中的this ）

https://jsfiddle.net/gaby/qukkwvL1/3/

演示

Answer 4

该行：

$(this, "this + div[class^='shapeRight']");

意思是：

在this的上下文中查找元素this + div[class^='shapeRight']"。其中字符串中的第二个this是元素<this/>，而不是对象。

您希望使用$(this).next(".shapeRightDiamond")或$(this).siblings(".shapeRightDiamond")来获取被点击的元素旁边的元素。要将元素链接到同一组，您需要使用.add()或.addBack()

var elems = $(this).add( $(this).next(".shapeRightDiamond") );

或

var elems = $(this).next(".shapeRightDiamond").addBack();

在'this'之后选择元素

4 个答案: