jQuery 3.3 - Multiple selector ("selector1, selector2, selectorN")

محدد متعدد ("selector1 ، selector2 ، selectorN")




jquery

اختيار متعددة

الوصف: يختار النتائج المدمجة لجميع المحددات المحددة.

  • الإصدار المضاف: 1.0 jQuery ("selector1، selector2، selectorN")

    selector1: أي محدد صالح.

    selector2: محدد صالح آخر.

    selectorN: كمحددات أكثر صالحة كما تريد.

يمكنك تحديد أي عدد من المحددات ليتم دمجها في نتيجة واحدة. هذا combinator متعددة التعبير هو طريقة فعالة لتحديد العناصر المتباينة. قد لا يكون ترتيب عناصر DOM في كائن jQuery الذي تم إرجاعه متطابقًا ، حيث سيكون في ترتيب المستندات. بديل لهذا combinator هو. add() طريقة.

أمثلة:

يجد العناصر التي تطابق أي من هذه المحددات الثلاثة.

<!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>

عرض:

إظهار الترتيب في كائن jQuery.

<!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>

عرض: