目标特定类别 + 数字

Question

我正在尝试让不同尺寸的图像在页面中心一个接一个地随机出现，现在我设法让它们随机出现并让它们具有不同的宽度和高度。但是我确定我可以针对所有类而不是复制每个具有不同名称的代码？我记得有一次看到一个函数以一个类为目标并自动跟随它的数字，比如 .item +（然后是扩展名？）

欢迎提供有关让它们出现在中心周围而不是分散在各处的任何提示。我将它与许多不同的代码一起修补，所以它有点像科学怪人。

$(".grid-item").hide().each(function(i) {
  $(this).delay(i*500).fadeIn(500);
});

var pane_width = $(".random-pane").width() - $(".grid-item").width();
var pane_height = $(".random-pane").height() - $(".grid-item").height();

$(".random-pane").children().each( function(){

  var x = Math.round(Math.random() * pane_width);
  var y =  Math.round(Math.random() * pane_height);

  $(this).css("top",y);
  $(this).css("left",x);

});

var rand=Math.floor(Math.random()*30)+10;
var width=Math.round(($(window).width()/100)*rand);
$('.item-1').width(width);

var rand=Math.floor(Math.random()*30)+10;
var width=Math.round(($(window).width()/100)*rand);
$('.item-2').width(width);

var rand=Math.floor(Math.random()*30)+10;
var width=Math.round(($(window).width()/100)*rand);
$('.item-3').width(width);

var rand=Math.floor(Math.random()*30)+10;
var width=Math.round(($(window).width()/100)*rand);
$('.item-4').width(width);

var rand=Math.floor(Math.random()*30)+10;
var width=Math.round(($(window).width()/100)*rand);
$('.item-5').width(width);

Answer 1

要定位类中包含item- 的所有元素，您可以使用

$('[class*="item-"]').each(function(){
    // Run code here for each match using `$(this)`
})

您不能保证它后面会跟一个数字。见https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

话虽如此，如果你可以修改 HTML，我会给他们所有相同的类，只使用.item 来防止误报。例如，因为你有另一个元素的类special-item-highlight

示例：

$('[class*="item-"]').each(function() {
  $(this).width(Math.random() * 300)
})

div {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="item-1">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="item-2">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="item-3">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>