使用 jquery 迭代动态内容

Question

var deneme = document.getElementsByClassName("content-holder");
var uzat = document.getElementsByClassName("uzat");
for (var i = 0; i < deneme.length; i++) {
    var yuksek = deneme[i].offsetHeight;
    if (yuksek > 250) {
        deneme[i].style.height = "97px";
        uzat[i].style.display = "block"
    }
};

This function finds entries in a page that are longer than 250 px and shrinks them to 97 px, also adds a button "uzat" and when this button is clicked entry gets back to the original size.

Now I'm using infinite scroll to load new entries and this function doesn't work on newly loaded entries. I tried to trigger the function every time new content is added but it also affected the old entries. Is there any way to change only the new entries without affecting the old ones?

Infinite scroll html:

<div class="infinite-container">
    {% for entry in entries_list %}
    <div class="entry-yazar infinite-item">
        <span class=title-span>{{entry.title}}</span>
        <p class=content-holder id={{entry.id}}>
            {% if entry.safe %}{{entry.content|safe|linebreaksbr}}{% else %}{{entry.content|linebreaksbr}}{% endif %}
        </p>
        <button id="{{entry.id}}b" onclick="larger('{{entry.id}}','{{entry.id}}b')" class=uzat>doyamadım...</button>
        <form method="GET">
            {% csrf_token %}

            {% if own_entry > 0 %}
            <div class=entry-bottom>
                <span class=num-holder>{{entry.own_like}}</span>
                <img class=icon3 src="{% static 'icons\facebook.png' %}" alt="facebook">
                <img class=icon4 src="{% static 'icons\twitter.png' %}" alt="twitter">
                <time>
                    {% if best_one == entry.id %}
                    <img class=star-icon src="{% static 'icons\golden-star.png' %}" alt="like">
                    {% endif %}
                    {% if today_best_one == entry.id %}
                    <img class=star-icon src="{% static 'icons\bronze-star.png' %}" alt="like">
                    {% endif %}
                    <span class=timer>{{entry.created_date|date:'Y-m-d H:i'}}</span>
                </time>
                <div class=user-holder>
                    <a href="/entries/delete/{{entry.id}}"><img class=edit-icon src="{% static 'icons\delete.png' %}"
                            alt="sil"></a>
                    <a href="/entries/edit/{{entry.id}}"><img class=edit-icon src="{% static 'icons\edit2.png' %}"
                            alt="edit"></a>
                </div>

                {% else %}

                <form method="GET">
                    {% csrf_token %}

                    {% if entry.already_liked %}
                    <button type="button" onclick="like('{{entry.id}}')" class=active-button id=like-button{{entry.id}}><img
                            class=icon5 src="{% static 'icons\virus.png' %}" alt="like"></button>
                    <button style="display:none" onclick="like('{{entry.id}}')" class=active-button type="button"
                        id=dislike-button{{entry.id}}><img class=icon5 src="{% static 'icons\passive-virus.png' %}"
                            alt="dislike"></button>
                    <img class=icon3 src="{% static 'icons\facebook.png' %}" alt="facebook">
                    <img class=icon4 src="{% static 'icons\twitter.png' %}" alt="twitter">
                    <time>
                        {% if best_one == entry.id %}
                            <img class=star-icon src="{% static 'icons\golden-star.png' %}" alt="like">
                        {% endif %}
                        {% if today_best_one == entry.id %}
                            <img class=star-icon src="{% static 'icons\bronze-star.png' %}" alt="a-like">
                        {% endif %}
                        {% if followed_best_one == entry.id %}
                            <img class=star-icon src="{% static 'icons\purple-star.png' %}" alt="f-like">
                        {% endif %}
                        {% if today_followed_best_one == entry.id %}
                            <img class=star-icon src="{% static 'icons\blue-star.png' %}" alt="af-like">
                        {% endif %}
                        <span class=timer>{{entry.created_date|date:'Y-m-d H:i'}}</span>
                    </time>
                    {% else %}
                    <button style="display:none" onclick="like('{{entry.id}}')" class=active-button type="button"
                        id=like-button{{entry.id}}><img class=icon5 src="{% static 'icons\virus.png' %}" alt="like"></button>
                    <button type="button" id=dislike-button{{entry.id}} class=active-button onclick="like('{{entry.id}}')"><img
                            class=icon5 src="{% static 'icons\passive-virus.png' %}" alt="dislike"></button>
                    <img class=icon3 src="{% static 'icons\facebook.png' %}" alt="facebook">
                    <img class=icon4 src="{% static 'icons\twitter.png' %}" alt="twitter">
                    <time>
                        {% if best_one == entry.id %}
                            <img class=star-icon src="{% static 'icons\golden-star.png' %}" alt="like">
                        {% endif %}
                        {% if today_best_one == entry.id %}
                            <img class=star-icon src="{% static 'icons\bronze-star.png' %}" alt="a-like">
                        {% endif %}
                        {% if followed_best_one == entry.id %}
                            <img class=star-icon src="{% static 'icons\purple-star.png' %}" alt="f-like">
                        {% endif %}
                        {% if today_followed_best_one == entry.id %}
                            <img class=star-icon src="{% static 'icons\blue-star.png' %}" alt="af-like">
                        {% endif %}
                        <span class=timer>{{entry.created_date|date:'Y-m-d H:i'}}</span>
                    </time>
                    {% endif %}

    </div>
    {% endif %}
    {% endfor %}

Infinite scroll jquery:

 var infinite = new Waypoint.Infinite({
        element: $('.infinite-container')[0],

      });

Answer 1

Easiest way would be to add new entries with some type of DOM attribute that you will immediatelly remove after processing or the other way around just add one that says it was processed

like ie <element data-processed="true" />

or use additional class that you will remove on processing and search for it.