Question

ETA - 找到解决方案。好工作Stack Overflow美女!!没有你我会怎么做;）;）

我正在制作旋转木马，有些物品有图像，有些物品没有。我需要能够将没有图像的项目作为样式进行定位，所以我试图在包含图像的div中添加一个类，如果这有意义的话吗？

我拥有的是： 对于带图片的项目：

＆＃13;

<div class="carousel-item active" style="width: 157.4px; margin-right: 2px;">
  <li>
    <a href="#" class="innerTabLink" rel="XYZ">
      <span>Day 1</span>
      <img src="*example image*" class="img-responsive" alt="words here" width="380" height="226" title="words here">
    </a>
  </li>
</div>

＆＃13;

对于没有图片的商品：

＆＃13;

<div class="carousel-item" style="width: 157.4px; margin-right: 2px;">
  <li>
    <a href="#" class="innerTabLink" rel="XYZ">
      <span>Day 1</span>
    </a>
  </li>
</div>

＆＃13;

我尝试使用jquery做的事情是添加课程＆＃39; noImg＆＃39;到div＆＃39; carousel-item＆＃39;我尝试过的是这种事情的许多变化：

$("div.carousel-item").addClass("noImg");
if ($(this).hasClass('.img-responsive')) {
  ("div.carousel-item").removeClass("noImg")
};

我已经尝试了.children .parent的各种变体我尝试过相反的方式并在.find上执行image-responsive并以这种方式添加类。

你有任何建议吗，你错过了这个显而易见的事情＆＃39;非常感谢，非常感谢提前。

Answer 1

示例中jQuery代码的问题是this没有上下文。这与您似乎期待的window相关，而不是.carousel-item。

另请注意，您的HTML无效。 li元素必须包含在父ul中。

要完成这项工作，您只需使用:not()和:has()的组合来查找不具有img元素的容器，就像这样：

$('.carousel-item:not(:has(img))').addClass('noImg');

.noImg, 
.noImg a {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-item active" style="width: 157.4px; margin-right: 2px;">
  <ul>
    <li>
      <a href="#" class="innerTabLink" rel="XYZ">
        <span>Day 1</span>
      </a>
    </li>
  </ul>
</div>
<div class="carousel-item active" style="width: 157.4px; margin-right: 2px;">
  <ul>
    <li>
      <a href="#" class="innerTabLink" rel="XYZ">
        <span>Day 2</span>
        <img src="*example image*" class="img-responsive" alt="words here" width="380" height="226" title="words here">
      </a>
    </li>
  </ul>
</div>
<div class="carousel-item active" style="width: 157.4px; margin-right: 2px;">
  <ul>
    <li>
      <a href="#" class="innerTabLink" rel="XYZ">
        <span>Day 3</span>
      </a>
    </li>
  </ul>
</div>

Answer 2

工作示例，请参阅console.output：

＆＃13;

$('.carousel-item').each(function (idx) {
  if ($(this).find('img').length)
    $(this).removeClass('noImg')
  else
    $(this).addClass('noImg')
  console.log('Div ' + idx + ' hasClass noImg: ' + $(this).hasClass('noImg'))
})

＆＃13;

<div class="carousel-item active" style="width: 157.4px; margin-right: 2px;">
  <li>
    <a href="#" class="innerTabLink" rel="XYZ">
      <span>Day 1</span>
      <img src="*example image*" class="img-responsive" alt="words here" width="380" height="226" title="words here">
    </a>
  </li>
</div>

<div class="carousel-item" style="width: 157.4px; margin-right: 2px;">
  <li>
    <a href="#" class="innerTabLink" rel="XYZ">
      <span>Day 1</span>
    </a>
  </li>
</div>

<script src="https://unpkg.com/jquery"></script>

＆＃13;

Answer 3

你可以这样，在元素的子元素中找到一个元素，如果存在，那么改变父元素的类

$(document).ready(function(){
 var hasImg=$("div.carousel-item").find("img");

  if(hasImg.lenght>0) 
    {
        $("div.carousel-item").removeClass("noImg");
    }
})

Answer 4

您可以在此处使用此工作代码：

SELECT count(id) FROM Foo

和脚本

<div class="carousel-item active">
    <li>
        <a href="#" class="innerTabLink" rel="XYZ">
            <span>Day 1</span>
            <img src="http://via.placeholder.com/350x150" class="img-responsive" alt="words here" width="350" height="150" title="words here">
        </a>
    </li>
</div>
<div class="carousel-item" style="width: 157.4px; margin-right: 2px;">
    <li>
        <a href="#" class="innerTabLink" rel="XYZ">
            <span>Day 1</span>
        </a>
    </li>
</div>

将类分配给图像的{div>父级

4 个答案: