简体   繁体   中英

iterating over dynamic content with jquery

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],

      });

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM