选择多个"div"的jQuery操作

Question

在我的页面上，我使用以下代码显示多个视频：

<div class="video-block">
<div class="video-profile-inactive">{profile}</div>
<div class="video-banned-inactive">{banned}</div>
</div>

某些视频具有"视频配置文件活动"或"视频禁止活动"类。但他们一次只有一个班级。这两个类都是不可能的。

当我的页面加载时，我正在寻找第一个将两个类都设置为"非活动"的div，如上例所示。

我已经在jQuery中添加了这个

$(".btn-profiled-inactive, .btn-banned-inactive").first(); 

但不起作用。

有谁知道我如何搜索所有具有"视频阻止"类的div，以及同时具有"视频配置文件非活动"和"视频禁止-非活动"类div

？例：

<div class="video-block">
<div class="video-profile-active" data-v-id="1" data-c-id="4">active profile video1</div>
<div class="video-banned-inactive">inactive banned video1</div>
</div>
<div class="video-block">
<div class="video-profile-inactive" data-v-id="2" data-c-id="4">inactive profile video2</div>
<div class="video-banned-active">active banned video2</div>
</div>
<div class="video-block">
<div class="video-profile-inactive" data-v-id="3" data-c-id="4">inactive profile video3</div>
<div class="video-banned-active">active banned video3</div>
</div>
<div class="video-block">
<div class="video-profile-inactive" data-v-id="4" data-c-id="4">inactive profile video4</div>
<div class="video-banned-inactive">inactive banned video4</div>
</div>

在这种情况下，video4 符合条件，因为两个类都处于非活动状态。现在的问题是我如何在jQuery中找到它并接收data-c-id和data-v-id。

Answer 1

所以，如果我理解正确，你想要第一个有 2 个非活动div 的.video-block。

$(".video-profile-inactive").next().each(function () {
if ($(this).hasClass("video-banned-inactive")) {
//parentDiv is the .video-block that has 2 inactive divs
var parentDiv = $(this).parent('.video-block');
var data1 = $(this).prev().attr('data-v-id');
var data2 = $(this).prev().attr('data-c-id');
alert(data1);
alert(data2);     
return false;
}
});

我有一个带有一些混合div的JSFiddle：https://jsfiddle.net/vnqtxya5/33/

.attr('data-v-id')会得到你的价值观。

如果你在循环中不返回 false，它会将该类添加到具有 2 个非活动div 的所有.video-block。

Answer 2

要获取具有video-block类的所有div，则可以使用

$('.video-block'); 

如果你想得到具有video-profile-inactive和video-banned-inactive的div，那么可以使用以下代码获取

$('.video-profile-inactive.video-banned-inactive');

Answer 3

由于你的英语，这个问题不清楚。我想你想说第一个div与class.btn-profiled-inactive和第一个div与班级.btn-banned-inactive.如果是这样，你可以这样做。

$(".btn-profiled-inactive").first(); 
$(".btn-banned-inactive").first(); 

Answer 4

您可以使用以下选择器

$(".video-block > .video-profile-inactive + .video-banned-inactive").first()