jQuery選擇器中的兄弟選擇器可以幫助我們找到元素在同一層級中的兄弟節點。
我們可以使用以下的兄弟選擇器來選擇兄弟元素:
$(selector).siblings() $(selector).next() $(selector).nextAll() $(selector).prev() $(selector).prevAll()
siblings() 選擇器:
該選擇器可以選擇指定元素的所有同級兄弟元素。
例子: $(document).ready(function(){ $("button").click(function(){ $(this).siblings().css({"color": "red", "border": "2px solid red"}); }); });
next()選擇器:
該選擇器可以選中指定元素的下一個同級元素。
例子: $(document).ready(function(){ $("button").click(function(){ $(this).next().css({"color": "red", "border": "2px solid red"}); }); });
nextAll() 選擇器:
該選擇器可以選擇指定元素之后的所有同級元素。
例子: $(document).ready(function(){ $("button").click(function(){ $(this).nextAll().css({"color": "red", "border": "2px solid red"}); }); });
prev() 選擇器:
該選擇器可以選擇指定元素的上一個同級元素。
例子: $(document).ready(function(){ $("button").click(function(){ $(this).prev().css({"color": "red", "border": "2px solid red"}); }); });
prevAll() 選擇器:
該選擇器可以選擇指定元素之前的所有同級元素。
例子: $(document).ready(function(){ $("button").click(function(){ $(this).prevAll().css({"color": "red", "border": "2px solid red"}); }); });
使用這些兄弟選擇器可以實現對一組同級元素的選擇和操作。