jq-repeat - Simple, Powerful jQuery Templating

What is jq-repeat?

A simple, yet highly customizable jQuery plugin to handle all of your client-side repetitive DOM needs. Simple, quick and powerful templating using Mustache syntax. Modeled after ng-repeat with automatic DOM synchronization.

🚀 Easy to Use

Just add a jq-repeat attribute and push data to the scope

⚡ Automatic DOM Sync

DOM updates automatically when you modify the data

🎨 Mustache Templates

Familiar templating syntax with full Mustache support

📦 Array Methods

Use standard array methods: push, pop, splice, and more

📜 MIT License

Free to use in any project, commercial or personal

📖 Full Documentation

Complete API reference and examples on GitHub

Installation

npm install jq-repeat

Or include via CDN:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.2.0/mustache.min.js"></script>
<script src="path/to/jq-repeat.min.js"></script>

Interactive Todo List with Edit & Done

Add tasks, mark them as done, edit them, or remove them. This shows real-world CRUD operations with jq-repeat.

{{ task }}
{{{ doneButton }}}

View Code

<ul>
    <li jq-repeat="todos1" class="todo-item-row {{ doneClass }}">
        <span class="todo-text">{{ task }}</span>
        <div class="todo-actions">
            {{{ doneButton }}}
            <button class="btn-sm btn-edit" onclick="editTodo1(this)">Edit</button>
            <button class="btn-sm btn-remove" onclick="$(this).scopeItemRemove()">Remove</button>
        </div>
    </li>
</ul>

// Add a task with done button
$.scope.todos1.push({
    task: 'Buy groceries',
    done: false,
    doneButton: '<button class="btn-sm btn-done" onclick="markDone1(this)">Done</button>',
    doneClass: ''
});

// Mark as done
function markDone1(button) {
    const $el = $(button).scopeGetEl();
    const index = Number($el.attr('jq-repeat-index'));
    $.scope.todos1.update(index, {
        done: true,
        doneButton: '<button class="btn-sm done">✓</button>',
        doneClass: 'done'
    });
}

// Edit a task
function editTodo1(button) {
    const $el = $(button).scopeGetEl();
    const index = Number($el.attr('jq-repeat-index'));
    const item = $.scope.todos1.splice(index, 1)[0];
    $('#todo-input-1').val(item.task).focus();
}

Automatic Sorting

Items are automatically inserted in sorted order using jr-order-by. Try adding tasks with different priorities - they'll be sorted by priority!

P{{ priority }} - {{ task }}

View Code

<!-- Just add jr-order-by attribute -->
<li jq-repeat="todos2" jr-order-by="priority">
    <span><strong>P{{ priority }}</strong> - {{ task }}</span>
    <button onclick="$(this).scopeItemRemove()">Remove</button>
</li>

// Items are automatically inserted in sorted order by priority!
$.scope.todos2.push({ task: 'Low priority task', priority: 10 });
$.scope.todos2.push({ task: 'High priority task', priority: 1 });
// High priority (1) will appear before low priority (10)

Custom Animations

Use hooks like __put and __take to add smooth fade in/out animations when items are added or removed.

{{ task }}

View Code

// Fade in when items are added
$.scope.todos3.__put = function($el, item, list) {
    $el.hide().fadeIn(300);
};

// Fade out when items are removed
$.scope.todos3.__take = function($el, item, list) {
    $el.fadeOut(300, function() {
        $(this).remove();
    });
};

Array Methods

All standard array methods work with automatic DOM updates. Try them on the todo list below!

{{ task }}

List Length: 0 items

View Code

// All standard array methods work!
$.scope.todos4.push({ task: 'New task' });    // Add to end
$.scope.todos4.pop();                         // Remove from end
$.scope.todos4.shift();                       // Remove from start
$.scope.todos4.unshift({ task: 'Urgent!' }); // Add to start
$.scope.todos4.reverse();                     // Reverse order
$.scope.todos4.splice(1, 1);                  // Remove at index 1

// DOM updates automatically for all methods!

Real-World Example - Reddit Feed

Fetch data from Reddit's JSON API and automatically render it. This shows how jq-repeat works with real external data.

{{ score }}

{{ title }}

by {{ author }} {{ num_comments }} comments

View Code

<ul>
    <li jq-repeat="reddit">
        <div class="reddit-score">{{ score }}</div>
        <div class="reddit-content">
            <h4>
                <a href="{{ url }}" target="_blank">{{ title }}</a>
            </h4>
            <div>
                <span>by {{ author }}</span>
                <a href="https://reddit.com{{ permalink }}" target="_blank">
                    {{ num_comments }} comments
                </a>
            </div>
        </div>
    </li>
</ul>

// Fetch from Reddit's JSON API
$.get('https://www.reddit.com/.json', function (data) {
    data.data.children.forEach(function (post) {
        $.scope.reddit.push(post.data);
    });
});

// That's it! Items automatically render as they're added.

📚 Full Documentation

Want to learn more? Check out the complete documentation on GitHub with detailed API references, advanced examples, and integration guides.

Read Full Documentation on GitHub →