Целевое задание c класс + цифры

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>