使用jQuery选择不在类名中的第一个div答案

【问题标题】：Select first div not in class name using jQuery使用jQuery选择不在类名中的第一个div
【发布时间】：2017-01-06 07:28:18
【问题描述】：

你好，你怎么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

【问题讨论】：

无法理解您想要做什么。请明确说明
你能解释一下吗.....你的html结构和你想选择哪个div
你能分享小提琴链接吗？
$("#drop-area").find("div .drop-area__item").not('.drop-area__itemPage').first();?
是的，它的工作谢谢......

标签： javascript html css

【解决方案1】：

这是一个 sn-p 显示选择的第一个孩子有一个班级而没有另一个班级：

$("#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")

【讨论】：

这里是另一个按内容（不是类）选择元素的示例：stackoverflow.com/a/41309490/4206079

【解决方案2】：

首先选择所有相关元素，然后使用类.drop-area__itemPage 排除，然后使用.eq(0) 选择其中的第一个：

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

【讨论】：

【解决方案3】：

我对您要执行的操作进行了一些猜测，但是如果您想找到 drop-area 的第一个子 div，它没有 drop-area__itemPage 类，您可以这样做：

$(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>

【讨论】：