Question

除非图像具有特定的父类，否则我需要选择 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>

Answer 1

您可以使用以下脚本找到正确的图像元素。您可以使用 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>

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>

选择没有特定父类的所有图像

2 个答案: