[英]jQuery: Selecting immediate siblings
Suppose I have this HTML: 假设我有这个HTML:
<div id="Wrapper">
<div class="MyClass">some text</div>
<div class="MyClass">some text</div>
<div class="MyBorder"></div>
<div class="MyClass">some text</div>
<div class="MyClass">some text</div>
<div class="MyClass">some text</div>
<div class="MyBorder"></div>
<div class="MyClass">some text</div>
<div class="MyClass">some text</div>
</div>
I want to get the text of the MyClass divs next to the one clicked on, in the order they're in. 我想按它们所在的顺序在单击的旁边获得MyClass div的文本。
This is what I have: 这就是我所拥有的:
$('#Wrapper').find('.MyClass').each(function () {
AddressString = AddressString + "+" + $(this).text();
});
I know adds ALL the MyClass divs; 我知道添加所有MyClass div; I'm just wondering if there's a quick way to do it.
我只是想知道是否有一种快速的方法。
Thanks. 谢谢。
Using .text() , .prevUntil() and .nextUntil() 使用.text() ,.prevUntil()和.nextUntil ()
To get text of all previous and next .MyClass
element from clicked .MyBorder
: 要获得所有前面和后面的文本
.MyClass
从点击的元素.MyBorder
:
$('#Wrapper').on('click', '.MyBorder', function() {
var AddressString = [];
$(this).nextUntil('.MyBorder').text(function(index, text) {
AddressString.push(text);
});
$(this).prevUntil('.MyBorder').text(function(index, text) {
AddressString.push(text);
});
console.log(AddressString.join(', '));
});
Combination of prevUntil()
, nextUntil()
with siblings() prevUntil()
, nextUntil()
和siblings()的组合
$('#Wrapper').on('click', '.MyClass' function() {
var AddressString = [];
$(this).siblings('.MyClass').prevUntil('.MyBorder').add($(this).prevUntil('.MyBorder')).text(function(index, text) {
AddressString.push(text);
});
console.log(AddressString.join(', '));
});
You can use .nextUntil()
and .prevUntil()
您可以使用
.nextUntil()
和.prevUntil()
$('#Wrapper').on('click','.MyClass', function(e){
var self = $(this),
previous = self.prevUntil('.MyBorder', '.MyClass'), // find the previous ones
next = self.nextUntil('.MyBorder', '.MyClass'), // find the next ones
all = $().add(previous).add(self).add(next); // combine them in order
var AddressString = '';
all.each(function(){
AddressString += '+' + $(this).text();
});
alert(AddressString);
});
This will find all the .MyClass
elements ( in order ) that lie in the same group of .MyClass
elements seperated by the .MyBorder
elements. 这会发现所有的
.MyClass
元件( 按顺序 )位于同一组的.MyClass
由分隔元件.MyBorder
元件。
Demo at http://jsfiddle.net/gaby/kLzPs/1/ 演示在 http://jsfiddle.net/gaby/kLzPs/1/
If you're wanting to get all siblings that are within the borders, the following works: 如果您想获取边界内的所有兄弟姐妹,则可以使用以下方法:
$("#Wrapper").on("click", ".MyClass", function(){
var strings = [];
$(this)
.add( $(this).prevUntil(".MyBorder") )
.add( $(this).nextUntil(".MyBorder") )
.text(function(i,t){
strings.push( t );
});
alert( strings.join(', ') );
});
Fiddle: http://jsfiddle.net/Uw5uP/3/ 小提琴: http : //jsfiddle.net/Uw5uP/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.