Целевой класс + цифры

Я пытаюсь, чтобы изображения разных размеров появлялись случайным образом по одному вокруг центра страницы, а сейчас мне удалось сделать так, чтобы они появлялись случайным образом и иметь разную ширину и, соответственно, высоту. Тем не менее, я уверен, что я могу предназначаться для всех классов вместо того, чтобы копировать каждый отдельный код с другим именем? Я помню, как однажды увидел функцию, которая нацелена на класс и автоматически на число, следующее за ним, например .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);

Всего 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>


Есть идеи?

10000