Question

我有一些由wordpress生成的数据创建的HTML，基本上显示div中的图像。

如果可能，我想要以下内容;

如果div少于4张图片 - 只显示div中的第一张图片！以下是生成的HTML示例;

 <div class="display-block">
 <img src="image">
 <img src="image">
 <img src="image">
 <img src="image">
 </div>

 <div class="display-block">
 <img src="image">
 <img src="image">
 <img src="image">
 </div>

基于以上所述，第一个显示块div将显示其所有子图像，但第二个只显示3个子图像，仅显示第一个图像。

这基本上是这样我可以在视觉上同样填充缩略图。

这是一个截图，所以你可以看到我的意思;

所以，第一块＆＃39;生产力＆＃39;只有两个图像，并没有很好地填充其容器。这就是我想要的目标

这个div只有不到4个图像，所以除了第一个之外都隐藏所有图像并使其填充它的容器，我可以通过更改图像最大宽度来完成。第二个块代码片段＆＃39;只有1张图片并且很好地填充了它的容器，因为我能够使用唯一子选择器来定位它。

然后是第3块网站设计灵感＆＃39;有4个或更多的图像，所以它拉出前4个并填充它的＆＃39;容器很好。

Answer 1

假设<img>元素中<div>元素的最大数量为4，则以下CSS应满足您的需求：

img {
  /* hiding all images by default: */
  display: none;
}

/* Showing the first <img> element (if
   it's also the first child of its
   parent): */    
img:first-child,

/* Selecting the image which is the
   fourth-last-child of its parent
   element, and from there selecting
   all <img> elements which follow: */
img:nth-last-child(4)~img {
  display: inline-block;
}

div.display-block {
  margin-bottom: 1em;
}

img {
  box-shadow: 0 0 3px 1px limegreen;
  height: 4em;
  width: 2em;
  /* using opacity, rather than
     'display: none' in order that
     you can easily see which
     <img> elements are selected */
  opacity: 0.2;
}

img:first-child,
img:nth-last-child(4)~img {
  opacity: 1;
}

<div class="display-block">

  <img src="image">
  <img src="image">
  <img src="image">
  <img src="image">


</div>


<div class="display-block">

  <img src="image">
  <img src="image">
  <img src="image">


</div>

JS Fiddle demo

关于对另一个问题的评论：

...现在[我]需要进行第一次[图像]宽度更改以填充框...

鉴于这一要求，您真正需要做的就是定义width: 100%，但请记住，这也会导致<div>元素溢出，并显示四个<img>元素，所以你需要定义滚动行为，例如overflow-x: auto：

div.display-block {
  margin-bottom: 1em;
  /* my assumption is that you're wanting a
     horizontal carousel, therefore I'm
     forcing the <img> elements to be on the
     same 'line' of the parent element: */
  white-space: nowrap;

  /* allowing the browser to decide whether
     a scroll bar is necessary: */
  overflow-x: auto;
  width: 80%;
  margin: 0 auto;
  border: 2px solid #000;
}

img {
  box-shadow: 0 0 3px 1px limegreen;
  /* setting the width of the <img>
     elements to 100% of the width
     of the parent; here we set only
     the width so as to allow the
     browser to maintain the image's
     aspect ratio: */
  width: 100%;
  /* hiding the <img> elements by
     default: */
  display: none;
}

img:first-child,
img:nth-last-child(4)~img {
  /* displaying the <img> elements
     matching the above selectors: */
  display: inline-block;
}

div.display-block {
  margin-bottom: 1em;
  white-space: nowrap;
  overflow-x: auto;
  width: 80%;
  margin: 0 auto;
  border: 2px solid #000;
}

img {
  box-shadow: 0 0 3px 1px limegreen;
  width: 100%;
  display: none;
  background-color: #f90;
}

img:first-child,
img:nth-last-child(4)~img {
  display: inline-block;
}

<div class="display-block">

  <img src="http://lorempixel.com/300/300/nightlife/1">
  <img src="http://lorempixel.com/200/300/nightlife/2">
  <img src="http://lorempixel.com/300/200/nightlife/3">
  <img src="http://lorempixel.com/500/500/nightlife/4">


</div>


<div class="display-block">

  <img src="http://lorempixel.com/300/300/nature/1">
  <img src="http://lorempixel.com/300/300/nature/2">
  <img src="http://lorempixel.com/300/300/nature/3">


</div>

JS Fiddle demo

参考文献：

CSS：
- :first-child。
- General-sibling combinator (~)。
- :nth-last-child()。

Answer 2

这可能是一种更紧凑的方式，但这有效：

$(document).ready(function(){
$(".display-block").each(function(){
    if ($(this).find("img").length <4)
    {
       $(this).hide();
    }
    else
    {
       $(this).show();
    }
  })
});

另一种更紧凑的方式：

$(document).ready(function(){
    $(".display-block").hide();
    $(".display-block img:nth-child(4)").each(function(){
        $(this).closest(".display-block").show();
    });
});

Answer 3

你需要使用类.display-block循环遍历每个div并检查子项的数量是否小于4.如果是，则隐藏除第一个之外的每个孩子:)看看这段代码：

$(".display-block").each(function() {
  if($(this).children().length < 4) {
    $(this).children(":not(:first-of-type)").fadeOut(0);
  }
});

您还可以在此处查看最终示例：

$(".display-block").each(function() {
  if ($(this).children().length < 4) {
    $(this).children(":not(:first-of-type)").fadeOut(0);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="display-block">

  <img src="image">
  <img src="image">
  <img src="image">
  <img src="image">


</div>


<div class="display-block">

  <img src="image">
  <img src="image">
  <img src="image">


</div>

目标div少于4张图片（或儿童）

3 个答案: