Of Stack

Details of hierarchical filter selector for jquery selectors

  • 2020-03-30 01:34:37
  • OfStack 


$("ancestor descendant") Selection: parent Everything after the element child The element 
$("parent > child") Selection: parent All directly after the element child Element, what is "direct", namely the meaning of the first level 
$("prev + next") : prev and next It's two elements of the same level .  Selected in the prev After the element next The element 
$("prev ~ siblings"): choose prev Back ground siblings Filtered elements. note :siblings Is the filter

The latter two are used less, generally there will be other selectors to replace 

$("prev + next") Is equivalent to next()
$("prev ~ siblings") Is equivalent to nextAll()

Example: 

<style type="text/css">
  
  .highlight{   
   background-color: gray
  }
 </style>



<body>
    <div>
     <p id="p1"> The first one DIV The inside of the P Elements. </p>
    </div>
    <p id="p2"> The first single P Elements. </p>
    <div>
     <span>DIV The inside of the SPAN Elements. </span>
     <p id="p3"> The second DIV The inside of the P Elements. </p>
     <span>
      <p id="p4">DIV The inside of the SPAN The inside of the P Elements. </p>
     </span>
    </div>
     <table>
      <tr>
       <th>A</th><th>B</th><th>C</th>
      </tr>
      <tr>
       <td>1</td><td>2</td><td>3</td>
      </tr>
     </table>
     <p id="p5"> The second one P Elements. </p>
     <span> single SPAN Elements. </span>
  </body>



var s = $("div p").addClass("highlight"); //Select all the p elements after the div & NBSP;   The results are: p1,p3,p4

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127095439.png "> 


var s = $("div > p").addClass("highlight"); //Selects all the first level p elements after the div & NBSP;   The results are: p1,p3. P4 is not selected because p4 is not directly under div

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127095447.png "> 


var s = $("div + p").addClass("highlight");   //Select the p element & cake next to the div; The result is: p2. P5 is not selected because p5 is not next to div

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127095453.png "> 

var s = $("div ~ p").addClass("highlight");     //Select all of the p elements immediately after the div & NBSP; The results are: p2,p5

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127095502.png ">

Related articles: