使用jQuery選擇不在類名中的第一個div

Question

你好你如何find element不在這個類名中的find element ？

drop-area__itemPage

我用這個但不工作

 $("#drop-area").children("div").find(".drop-area__item:not('.drop-area__itemPage:first')")

 $("#drop-area").children("div").find(".drop-area__item") div#page1.drop-area__item.ui-droppable.drop-area__itemPage div#page2.drop-area__item.ui-droppable.ui-droppable-active div#page3.drop-area__item.ui-droppable.ui-droppable-active div#page4.drop-area__item.ui-droppable.ui-droppable-active div#page5.drop-area__item.ui-droppable.ui-droppable-active div#page6.drop-area__item.ui-droppable.ui-droppable-active div#page7.drop-area__item.ui-droppable.ui-droppable-active div#page8.drop-area__item.ui-droppable.ui-droppable-active div#page9.drop-area__item.ui-droppable.ui-droppable-active

enter code here

Answer 1

這是一個片段，顯示了選擇第一個具有一個類而沒有另一個類的孩子：

 $("#drop_area").find("div.class1:not([class~='class3']):first").css("border", "5px blue solid");

 .class1, .class2, .class3{ display: inline-block; margin: 20px; width: 150px; height: 80px; } .class1 { background: teal; } .class2 { background: tomato; } .class3 { background: lightgreen; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="drop_area"> <div class="class1 class3 class2">class1 class3 class2</div> <div class="class2">class2</div> <div class="class1 class2">class1 class2</div> <div class="class3 class1">class3 class1</div> <div class="class1">class1</div> <div class="class2">class2</div> <div class="class1 class2">class1 class2</div> <div class="class3 class1">class3 class1</div> <div class="class3">class3</div> <div class="class2">class2</div> <div class="class3 class2">class3 class2</div> <div class="class3 class1">class3 class1</div> </div> <div class="result"></div>

所以結果 jquery 語句看起來像：

$("#drop-area .drop-area__item:not('.drop-area__itemPage'):first")

Answer 2

我正在猜測您要做什么，但是如果您想找到drop-area沒有類drop-area__itemPage的第一個子 div，您可以這樣做：

 $(function() { $("#drop-area").find(".drop-area__item").not('.drop-area__itemPage').first().css({ 'color': 'red' }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="drop-area"> <div id="page1" class=".drop-area__item ui-droppable drop-area__itemPage">1</div> <div id="page2" class="drop-area__item ui-droppable ui-droppable-active">2</div> <div id="page3" class="drop-area__item ui-droppable ui-droppable-active">3</div> </div>

Answer 3

首先選擇所有相關元素，然后使用類.drop-area__itemPage排除，然后使用.eq(0)選擇其中的第一個：

$('#drop-area div .drop-area__item.:not(.drop-area__itemPage)').eq(0);