Automically κάνουν divs σε μια σειρά

ψήφοι
2

Είμαι προσπαθεί να δημιουργήσει divs αυτόματα κάθε λίγα δευτερόλεπτα. Αυτή τη στιγμή έχω γι 'αυτό πρέπει να κάνετε κλικ για να δημιουργήσετε divs. Πώς μπορώ να το κάνω έτσι ώστε όταν η φόρτωση της σελίδας divs μου είναι να δημιουργούνται αυτόματα πηγαίνει οριζόντια μέχρι να γεμίσουν τη σελίδα; Ευχαριστώ.

$('#add').on('click', function() {
  if ($('#child').height() == $('#main').height() && $('#child').width() == $('#main').width()) {
    console.log(done);

  } else {
    $('#child').append('<div id=sub>aaaa</div>')
  }
})
#main {
  width: 500px;
  height: 500px;
  background: red;
}

#sub {

width:50px;
height:50px;
background:blue;
}
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
<button id=add>Add</button>
<div id=main>
  <div id=child></div>
</div>

Δημοσιεύθηκε 27/11/2018 στις 17:42
πηγή χρήστη
Σε άλλες γλώσσες...                            


5 απαντήσεις

ψήφοι
1

Μπορείτε να χρησιμοποιήσετε setInterval για να προσθέσετε κουτιά αυτόματα. Και χρησιμοποιεί display:inline-block;για #subτο στυλ CSS για να γίνει οριζόντια.

Δείτε το παρακάτω απόσπασμα:

var interval;

interval = setInterval(function(){
  if ($('#child').width() == $('#main').width()) {
    console.log("done");
    clearInterval(interval);
  } else {
    $('#child').append('<div id="sub">aaaa</div>')
  }
},1000);
#main {
  width: 500px;
  height: 500px;
  background: red;
}

#sub {

width:50px;
height:50px;
background:blue;
display:inline-block;
border:1px solid white;
box-sizing: border-box;
}

#child{ 
  display:inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
  <div id="child"></div>
</div>

Ενημέρωση 1:

Μπορείτε να ελέγξετε την κατάσταση δυναμικά από τον υπολογισμό του αριθμού των πιθανών κουτιά μπορούμε να έχουμε σε ένα δοχείο.

Δείτε το παρακάτω απόσπασμα:

var interval;
var counter = 0;
var maxCount = 1000;

interval = setInterval(function(){
    if(counter == 1){
      maxCount = Math.floor($('#main').width()/$('#sub').outerWidth()) * Math.floor($('#main').height()/$('#sub').outerHeight());
    }
    
  if(counter != 0 && counter >= maxCount){
    console.log("done");
    clearInterval(interval);
  } else {
    $('#child').append('<div id="sub">aaaa</div>');
  }
  
  counter++;
},1000);
#main {
  width: 500px;
  height: 100px;
  background: red;
}

#sub {

width:50px;
height:50px;
background:blue;
display:inline-block;
border:1px solid white;
box-sizing: border-box;
}

#child{ 
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
  <div id="child"></div>
</div>

Η ελπίδα αυτή θα σας βοηθήσει! :)

Απαντήθηκε 27/11/2018 στις 18:31
πηγή χρήστη

ψήφοι
1

Μπορείτε να δοκιμάσετε setIntervalτη λειτουργία

var interval = setInterval(function(){
if ($('#child').height() == $('#main').height() && $('.row').last().width() == $('#main').width()) {
    console.log("done");
    clearInterval(interval);
  } else {
    var _$row;
    if ($('.row').last().width() == $('#main').width() || $('.row').length == 0){
        _$row = $('<div class="row"></div>');
        $('#child').append(_$row);
    } else {
        _$row = $('.row').last();
    }
    _$row.append('<div id="sub">aaaa</div>');
  }
}, 50);
#main {
  width: 500px;
  height: 500px;
  background: red;
}

#sub {
  width:50px;
  height:50px;
  background:blue;
  float:left;
}

.row:after {
    clear: both;
    content: '';
    display: table;
}

.row {
    width: fit-content;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
   <div id="child"></div>
</div>

Απαντήθηκε 27/11/2018 στις 17:52
πηγή χρήστη

ψήφοι
0

Πιθανότατα θέλουν να κάνουν χρήση του setInterval. Αυτή η μέθοδος θα εκτελέσει τη λειτουργία που περνούν ως το πρώτο επιχείρημα σε κάθε διάστημα (έως ότου διαγραφούν).

let i = 0;
const main = document.querySelector('#main');

setInterval(() => {
  var el = document.createElement('div');
  var text = document.createTextNode(i++);
  el.setAttribute('id', `sub-${i}`);
  el.setAttribute('class', 'sub');
  el.appendChild(text);
  main.appendChild(el);
}, 2000);
#main {
  width: 500px;
  height: 500px;
  background: red;
}

.sub {
  width: 50px;
  height: 50px;
  background: blue;
  color: white;
}
<div id="main">
  <div id="child"></div>
</div>

Απαντήθηκε 27/11/2018 στις 18:46
πηγή χρήστη

ψήφοι
0

Υπάρχουν μερικοί τρόποι για να το χειριστεί, αλλά ο πιο γρήγορος τρόπος για να πάρει από τον κώδικά σας σε αυτό που έχετε ζητήσει είναι να χρησιμοποιήσετε setTimeout

// no-conflict safe document ready function
jQuery(function($) {
  // call the function to kick things off
  addRowInOneSecond();

  // adding the row is placed inside this function for clarity / maintainability
  function addRowInOneSecond() {
    setTimeout(addRow, 1000);
  }

  function addRow() {
    if ($('#child').height() == $('#main').height() && $('#child').width() == $('#main').width()) {
      console.log("done");
      // stop, don't do anything else
      return;
    }

    // add the row
    $('#child').append('<div id="sub">aaaa</div>')
    // call the function again to add another row
    addRowInOneSecond();
  }
});
#main {
  width: 500px;
  height: 500px;
  background: red;
}

#sub {
  width: 50px;
  height: 50px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
  <div id="child"></div>
</div>

Απαντήθηκε 27/11/2018 στις 17:57
πηγή χρήστη

ψήφοι
0

Χρησιμοποιώντας jQuery, όταν το έγγραφο είναι έτοιμο, χρησιμοποιήστε setTimeout να κάνουμε πράγματα κάθε Χ ms.

$('document').ready(function () {
const seconds = 2;
function fill() {
	if ($('#child').height() == $('#main').height() && $('#child').width() == $('#main').width())
		return;

	$('#child').append('<div id="sub">aaaa</div>');
	setTimeout(fill, seconds  * 1000);
}
setTimeout(fill, seconds * 1000);
});
#main {
  width: 500px;
  height: 500px;
  background: red;
}

#sub {

width:50px;
height:50px;
background:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
  <div id="child"></div>
</div>

Απαντήθηκε 27/11/2018 στις 17:52
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more