Question

我正在尝试选择＆＃34;图片的所有实例＆＃34;任何具有＆＃34;强调＆＃34;类的div内的元素。这是一个页面的一个例子，其中的图片元素在＆＃34;高亮显示＆＃34; 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>来改变每个$('picture').css...元素的边界。

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>

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

4 个答案: