使用 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"
}
};

此函数在页面中查找长度超过 250 像素的条目并将其缩小到 97 像素，还添加一个按钮"uzat"，单击此按钮时，条目将恢复为原始大小。

现在我使用无限滚动来加载新条目，而此功能不适用于新加载的条目。我尝试在每次添加新内容时触发该功能，但它也影响了旧条目。有没有办法只更改新条目而不影响旧条目？

无限滚动 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 'iconsfacebook.png' %}" alt="facebook">
<img class=icon4 src="{% static 'iconstwitter.png' %}" alt="twitter">
<time>
{% if best_one == entry.id %}
<img class=star-icon src="{% static 'iconsgolden-star.png' %}" alt="like">
{% endif %}
{% if today_best_one == entry.id %}
<img class=star-icon src="{% static 'iconsbronze-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 'iconsdelete.png' %}"
alt="sil"></a>
<a href="/entries/edit/{{entry.id}}"><img class=edit-icon src="{% static 'iconsedit2.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 'iconsvirus.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 'iconspassive-virus.png' %}"
alt="dislike"></button>
<img class=icon3 src="{% static 'iconsfacebook.png' %}" alt="facebook">
<img class=icon4 src="{% static 'iconstwitter.png' %}" alt="twitter">
<time>
{% if best_one == entry.id %}
<img class=star-icon src="{% static 'iconsgolden-star.png' %}" alt="like">
{% endif %}
{% if today_best_one == entry.id %}
<img class=star-icon src="{% static 'iconsbronze-star.png' %}" alt="a-like">
{% endif %}
{% if followed_best_one == entry.id %}
<img class=star-icon src="{% static 'iconspurple-star.png' %}" alt="f-like">
{% endif %}
{% if today_followed_best_one == entry.id %}
<img class=star-icon src="{% static 'iconsblue-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 'iconsvirus.png' %}" alt="like"></button>
<button type="button" id=dislike-button{{entry.id}} class=active-button onclick="like('{{entry.id}}')"><img
class=icon5 src="{% static 'iconspassive-virus.png' %}" alt="dislike"></button>
<img class=icon3 src="{% static 'iconsfacebook.png' %}" alt="facebook">
<img class=icon4 src="{% static 'iconstwitter.png' %}" alt="twitter">
<time>
{% if best_one == entry.id %}
<img class=star-icon src="{% static 'iconsgolden-star.png' %}" alt="like">
{% endif %}
{% if today_best_one == entry.id %}
<img class=star-icon src="{% static 'iconsbronze-star.png' %}" alt="a-like">
{% endif %}
{% if followed_best_one == entry.id %}
<img class=star-icon src="{% static 'iconspurple-star.png' %}" alt="f-like">
{% endif %}
{% if today_followed_best_one == entry.id %}
<img class=star-icon src="{% static 'iconsblue-star.png' %}" alt="af-like">
{% endif %}
<span class=timer>{{entry.created_date|date:'Y-m-d H:i'}}</span>
</time>
{% endif %}
</div>
{% endif %}
{% endfor %}

无限滚动jquery：

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

Answer 1

最简单的方法是添加具有某种类型的 DOM 属性的新条目，您将在处理后立即删除这些条目，或者相反，只需添加一个表示已处理的条目

像IE<element data-processed="true" />

或者使用将在处理时删除的其他类并搜索它。