JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法

1. 获取下一个兄弟元素：next()

$(selector).next();  //获取当前元素下一个兄弟元素

示例：获取当前元素的下一个兄弟元素的文本内容

$(document).ready(function(){
  $("button").click(function(){
    var text = $(this).next().text();
    alert(text);
  });
});

2. 获取上一个兄弟元素：prev()

$(selector).prev();  //获取当前元素上一个兄弟元素

示例：获取当前元素的上一个兄弟元素的文本内容

$(document).ready(function(){
  $("button").click(function(){
    var text = $(this).prev().text();
    alert(text);
  });
});

3. 获取所有下一个兄弟元素：nextAll()

$(selector).nextAll();  //获取当前元素之后的所有兄弟元素

示例：获取当前元素之后的所有兄弟元素的文本内容

$(document).ready(function(){
  $("button").click(function(){
    var text = "";
    $(this).nextAll().each(function(){
      text += $(this).text() + " ";
    });
    alert(text);
  });
});

4. 获取所有上一个兄弟元素：prevAll()

$(selector).prevAll();  //获取当前元素之前的所有兄弟元素

示例：获取当前元素之前的所有兄弟元素的文本内容

$(document).ready(function(){
  $("button").click(function(){
    var text = "";
    $(this).prevAll().each(function(){
      text += $(this).text() + " ";
    });
    alert(text);
  });
});

5. 获取下一个指定的兄弟元素：nextUntil()

$(selector).nextUntil(selector);  //获取当前元素到指定元素之间的所有兄弟元素

示例：获取当前元素到下一个class为demo的元素之间的兄弟元素的文本内容

$(document).ready(function(){
  $("button").click(function(){
    var text = "";
    $(this).nextUntil(".demo").each(function(){
      text += $(this).text() + " ";
    });
    alert(text);
  });
});

6. 获取上一个指定的兄弟元素：prevUntil()

$(selector).prevUntil(selector);  //获取当前元素到指定元素之间的所有兄弟元素

示例：获取当前元素到上一个class为demo的元素之间的兄弟元素的文本内容

$(document).ready(function(){
  $("button").click(function(){
    var text = "";
    $(this).prevUntil(".demo").each(function(){
      text += $(this).text() + " ";
    });
    alert(text);
  });
});