jQuery：选择相邻的兄弟元素

Question

假设我有这段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>

我希望你能够翻译出紧接在点击的 MyClass div 后面的文本内容，并按它们所处的顺序排列。以下是代码示例：

$('#Wrapper').find('.MyClass').each(function () {
  AddressString = AddressString + "+" + $(this).text();
});

我知道它会添加所有的MyClass div元素; 我只是想知道是否有一种快速的方法可以完成这个任务。

谢谢。

- frenchie

---

下一个和上一个？还是在myborder元素之间的那些？ - Gabriele Petrioli

你可以使用.siblings()来返回兄弟元素。 - Jivings

你能在你的元素中放置一些不同的文本，然后演示你想要的输出是什么吗？ - David Thomas

Answer 1

使用 .text(), .prevUntil() 和 .nextUntil()

从点击的 .MyBorder 获取所有先前和后续的 .MyClass 元素的文本：

$('#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(', '));
});

结合使用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(', '));
});

- thecodeparadox

Answer 2

你可以使用 .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);

});

这将查找所有在同一组由 .MyBorder 元素分隔的 .MyClass 元素（按顺序）的元素。 示例请见 http://jsfiddle.net/gaby/kLzPs/1/

- Gabriele Petrioli

Answer 3

如果您想获取所有在边界内的兄弟节点，则可以使用以下代码：

$("#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(', ') );
});​

代码测试工具：http://jsfiddle.net/Uw5uP/3/

- Sampson