使用 jQuery 选择和影响 div 中的元素

Question

我正在尝试选择具有“亮点”类的任何 div 内的“图片”元素的所有实例。这是一个页面部分的示例，其中图片元素位于“highlights”div 中...

<div class="row highlights">
  <div class="col-sm-12">
    <div class="bx-adapt">
      <div class="col-sm-6 col-lg-4">
        <figure class="pic square">
          <picture>

             Content in here

          </picture>
        </figure>
     </div>
   </div>
 </div>
</div>

在网站上查看了一些与我类似的问题后，我认为以下 Javascript 会选择所有相关的图片元素并设置它们的样式，但事实并非如此。我得到的只是图片元素的每个实例的成功警报。

$('picture').each(function(i, elm) {
  if($(elm).closest(".highlights").length > 0) {
    $('picture').css("border","10px solid red");
    alert("Success");
  }
 });

我在选择相关图片元素的方式上一定是不正确的，但我不确定问题出在哪里。谁能指出我哪里出错了？

编辑

每个人的答案似乎都是正确的，但我怀疑页面的生成方式由于某种原因不允许我选择图片元素。我可以在图片元素中选择img（给他们红色边框），但不是这样的图片。

对于更多上下文，我正在处理的页面使用延迟加载来顺序加载页面上的图像，但是页面挂在 IE 上，所以我试图选择我认为导致大部分缓慢的元素-下。

Answer 1

您正在更改$('picture') 的样式，而不是实际的图片元素$(elm)。

试试：

   $(elm).css("border","10px solid red")

改为。

Answer 2

尝试不同的选择器

$('.highlights picture').each(function(i, elm) {
    $(elm).css("border","10px solid red");
}

Answer 3

$('.highlights picture').each( function( i, elm ) {
    $(elm).css("border", "10px solid red");
});

应该做到这一点 (; 记住 jQuery 元素选择器 $() 将 css 选择器作为参数。另外，您通过调用 $('picture').css... 来更改每个 <picture> 元素的边框。

Answer 4

我会推荐一种 CSS 方法：

div.highlights picture {
    border: 10px solid red;
}

或者如果你必须使用 jQuery，试试这个：

$('div.highlights picture').css('border','10px solid red');

注意：如果 DIV 是唯一具有 .highlights 类的元素类型，那么您可以将 div.highlights 替换为 .highlights。

div.highlights picture {
    border: 10px solid red;
}

<div class="row highlights">
  <div class="col-sm-12">
    <div class="bx-adapt">
      <div class="col-sm-6 col-lg-4">
        <figure class="pic square">
          <picture>

             Content in here

          </picture>
        </figure>
     </div>
   </div>
</div>
</div>
  
  
<div class="row highlights">
  <div class="col-sm-12">
    <div class="bx-adapt">
      <div class="col-sm-6 col-lg-4">
        <figure class="pic square">
          <picture>

             Content in here 2

          </picture>
        </figure>
     </div>
   </div>
</div>
</div>
  
<div class="row highlights">
  <div class="col-sm-12">
    <div class="bx-adapt">
      <div class="col-sm-6 col-lg-4">
        <figure class="pic square">
          <picture>

             Content in here 3

          </picture>
        </figure>
     </div>
   </div>
</div>
</div>
  
<picture>
  PICTURE element not in `div.highlights`
</picture>

$('div.highlights picture').css('border','10px solid red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  
<picture>
  PICTURE element not in `div.highlights`
</picture>
    <div class="row highlights">
      <div class="col-sm-12">
        <div class="bx-adapt">
          <div class="col-sm-6 col-lg-4">
            <figure class="pic square">
              <picture>

                 Content in here 0

              </picture>
            </figure>
         </div>
       </div>
    </div>
 </div>

<div class="row highlights">
  <div class="col-sm-12">
    <div class="bx-adapt">
      <div class="col-sm-6 col-lg-4">
        <figure class="pic square">
          <picture>

             Content in here 1

          </picture>
        </figure>
     </div>
   </div>
</div>
</div> 
  
<div class="row highlights">
  <div class="col-sm-12">
    <div class="bx-adapt">
      <div class="col-sm-6 col-lg-4">
        <figure class="pic square">
          <picture>

             Content in here 2

          </picture>
        </figure>
     </div>
   </div>
</div>
</div>
  
<div class="row highlights">
  <div class="col-sm-12">
    <div class="bx-adapt">
      <div class="col-sm-6 col-lg-4">
        <figure class="pic square">
          <picture>

             Content in here 3

          </picture>
        </figure>
     </div>
   </div>
</div>
</div>