Multiple Selector trong jQuery

Cú pháp Multiple Selector:

    jQuery( "selector1, selector2, selectorN" )

Trong đó:

  • Selector1: Bất kỳ bộ chọn hợp lệ.
  • Selector2: Một bộ chọn hợp lệ khác.
  • SelectorN: Các bộ chọn lọc hợp lệ khác theo ý muốn của bạn.

Multiple Selector (“selector1, selector2, selectorN”) cho phép bạn kết hợp nhiều bộ chọn lại với nhau

Ví dụ Multiple Selector

Ví dụ 1: Kết hợp ba bộ chọn với nhau

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>multiple demo</title>
      <style>
      div, span, p {
        width: 126px;
        height: 60px;
        float: left;
        padding: 3px;
        margin: 2px;
        background-color: #eee;
        font-size: 14px;
      }
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <div>div</div>
    <p class="myClass">p class="myClass"</p>
    <p class="notMyClass">p class="notMyClass"</p>
    <span>span</span>
     
    <script>
    $( "div, span, p.myClass" ).css( "border", "3px solid red" );
    </script>
     
    </body>
    </html>
Xem ví dụ »

Ví dụ 2: Hiển thị thứ tự các đối tượng.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>multiple demo</title>
      <style>
      b {
        color: red;
        font-size: 16px;
        display: block;
        clear:left;
      }
      div, span, p {
        width: 40px;
        height: 40px;
        float: left;
        margin: 10px;
        background-color: blue;
        padding: 3px;
        color: white;
      }
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <span>span</span>
    <p>p</p>
    <p>p</p>
    <div>div</div>
    <span>span</span>
    <p>p</p>
    <div>div</div>
    <b></b>
     
    <script>
    var list = $( "div, p, span" )
      .map( function() {
        return this.tagName;
      })
      .get()
      .join( ", " );
    $( "b" ).append( document.createTextNode( list ) );
    </script>
     
    </body>
    </html>
Xem ví dụ »