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; 我只是想知道是否有一个快速的方法来做到这一点.

谢谢.

Answer 1

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

.MyClass要从 clicked获取所有上一个和下一个元素的文本.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(', '));
});

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