Select 所有沒有特定父 class 的圖像

Question

我需要 select div（.entry-content）內的第二個圖像，除非圖像具有特定的父 class。 這是我嘗試的一個例子

在下面的示例中，我需要 select 第三個圖像，因為第二個圖像具有 parent-div 的父 class。

 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>

Answer 1

您可以使用以下腳本找到正確的圖像元素。 您可以使用filter過濾父級沒有父級 div class 的圖像元素。 請參閱下面的腳本以供參考

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

Answer 2

您可以使用單個選擇器查找所有圖像，除了那些有.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>