jQuery .once()
method for adding behaviors or classes once per element.
- Download
jquery.once.js
- Add
<script type="text/javascript" src="PATH/TO/jquery.once.js"></script>
somewhere after your jQuery script
$('.post').once().doSomethingOnAllPostsOnce();
$('.post').once().highlight(); // highlghts all posts that haven't been highlighted yet
$('.post').once().highlight(); // does nothing
addNewPost();
$('.post').once().highlight(); // highlights only the newly added post
$('body').once(); // returns [body] (1st time)
$('body').once(); // returns [] (2nd time)
<div class="post" id="post_1">...</div>
<div class="post" id="post_2">...</div>
<div class="post" id="post_3">...</div>
$('.post').once().highlight(); // highlights #post_1, #post_2 and #post_3
$.get(....) // dynamically loaded #post_4 via ajax
$('.post').once().highlight(); // highlights #post_4
Pass a string to the once
method, to perform different actions on the same elements, each action only once per element.
$('.post').once('highlighted').highlight() // Highlight all posts
$('.post').once('highlighted').highlight() // Does nothing
$('.post').once('wasBlinked').blink() // Blinks all posts
$('.post').once('wasBlinked').blink() // Does nothing
Pass a callback directly to the once
method, which will be called once per each element.
$('.post').once(function() {
$(this).doSomethingWithEachPostOnce();
});
// with a custom identifier
$('.post').once('highlight', function() {
$(this).highlight();
});