Выбор элемента после 'this'

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"]') не похоже на работу. Элемент clicked действительно изменил свою высоту, но его прямой сосед с классом, начинающийся с shapeRight, не работает.

Как выбрать элемент с щелчком и его shapeRight родной брат?

Благодаря

Answer 1

Либо использовать .next() если он является точным следующий узел

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

или использовать .siblings(), если они имеют один и тот же родитель, но может иметь и другие элементы в DOM между ними

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

В обоих случаях ALSE нужно добавить .addBack() в конце, чтобы включить текущий элемент в выбор (this в вашем случае)

Демо на https://jsfiddle.net/gaby/qukkwvL1/3/

Answer 2

Начиная с 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:

Мне нужно, чтобы выбрать элемент после этого и это в то же время

... что означает, что вы также хотите :

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

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; 
 
}

<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>

Answer 3

Вам необходимо удалить this из селектора (не имеет смысла в CSS-селекторах) и изменить порядок ваших параметров.selector string comes first, а затем контекст:

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

Edit: Если вы хотите, оба элемента, чтобы расти, использовать .add():

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

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

Answer 4

линия:

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

Средства:

Посмотрите на элемент this в контексте this + div[class^='shapeRight']". где второй в строке будет элементом <this/>, а не объектом.

---

Вы хотите использовать либо $(this).next(".shapeRightDiamond") или $(this).siblings(".shapeRightDiamond"), чтобы получить элемент рядом с той, которая была нажата. Для того, чтобы связать элементы с тем же набором, вы хотите использовать .add() или .addBack()

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

или

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