ドキュメント

Traversing/next

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

next[expr] )

Get a set of elements containing the unique next siblings of each of the given set of elements.
next only returns the very next sibling for each element, not all next siblings (see nextAll). You may provide an optional expression to filter the returned set.
Arguments:
expr (Optional)String
An expression with which to filter the returned set.
Examples:

Find the very next sibling of each disabled button and change its text "this button is disabled".

$("button[disabled]").next().text("this button is disabled");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("button[disabled]").next().text("this button is disabled");
  });
  </script>
  <style>
  span { color:blue; font-weight:bold; }
  button { width:100px; }
  </style>
</head>
<body>
  <div><button disabled="disabled">First</button> - <span></span></div>
  <div><button>Second</button> - <span></span></div>
  <div><button disabled="disabled">Third</button> - <span></span></div>
</body>
</html>

Find the very next sibling of each paragraph. Keep only the ones with a class "selected".

$("p").next(".selected").css("background", "yellow");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").next(".selected").css("background", "yellow");
  });
  </script>
  
</head>
<body>
  <p>Hello</p>
  <p class="selected">Hello Again</p>
  <div><span>And Again</span></div>
</body>
</html>

NameType