除非图像具有特定的父类,否则我需要选择 div (.entry-content) 内的第二个图像。这是我尝试的一个例子
在下面的示例中,我需要选择第三张图片,因为第二张图片的父类为 parent-div。
jQuery(".entry-content").each(function() {
jQuery(this).find("img:eq(1):not(:parent.parent-div)").addClass("second-img");
});
// or
jQuery(".entry-content").each(function() {
jQuery(this).find("img:eq(1)").not().parent(".parent-div").addClass("second-img");
});
.second-img { border: 1px solid black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entry-content">
<p></p>
<p></p>
<p><img /></p>
<div class="parent-div"><img /></div>
<div><img /></div>
<div></div>
<div class="parent-div"><img /></div>
<p></p>
<img />
<img />
<p></p>
<p><img /></p>
</div>
答案 0 :(得分:0)
您可以使用以下脚本找到正确的图像元素。
您可以使用 filter
过滤没有 parent-div 类的图像元素。请参阅以下脚本以供参考
$(function() {
var found = false;
var $img = $('div.entry-content img:gt(1)').filter(function() {
if (!found) {
var $parent = $(this).parent();
if(!$parent.hasClass('parent-div')) {
found = true;
return true;
}
}
return false;
});
$img.each(function() {
console.log($(this).attr('src'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entry-content">
<p></p>
<p></p>
<p><img src="1" /></p>
<div class="parent-div"><img src="2" /></div>
<div><img src="3" /></div>
<div></div>
<div class="parent-div"><img src="4" /></div>
<p></p>
<img src="5" />
<img src="6" />
<p></p>
<p><img src="7" /></p>
</div>
答案 1 :(得分:0)
您可以使用单个选择器来查找除具有 .parent-div 的图像之外的所有图像:
由于您的某些图像不在包装器中,而有些在 p
或 div
中,因此它需要两部分:
.entry-content > img
.entry-content > *:not(.parent-div) > img
>
确保图像不会被包含两次
然后 .eq(1)
(从零开始)得到“秒”。
$(".entry-content > img,.entry-content > *:not(.parent-div) > img").eq(1).addClass("second-img");
.second-img {
border: 20px solid green;
}
.parent-div>img {
border: 5px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entry-content">
<p></p>
<p></p>
<p><img src="https://i.stack.imgur.com/7bI1Y.jpg" height="50" /></p>
<div class="parent-div"><img src="https://i.stack.imgur.com/7bI1Y.jpg" height="50" /></div>
<div><img src="https://i.stack.imgur.com/7bI1Y.jpg" height="50" /></div>
<div></div>
<div class="parent-div"><img src="https://i.stack.imgur.com/7bI1Y.jpg" height="50" /></div>
<p></p>
<img src="https://i.stack.imgur.com/7bI1Y.jpg" height="50" />
<img src="https://i.stack.imgur.com/7bI1Y.jpg" height="50" />
<p></p>
<p><img src="https://i.stack.imgur.com/7bI1Y.jpg" height="50" /></p>
</div>