Jqueryでこのような間違いなしに "for forループ"を使用するにはどうすればよいですか？

Question

ここに問題があります： 私は簡単な順序のない投稿のリストを持っています。各投稿は切り捨てられ（250文字）、クリックしたときに展開する必要があります（.replaceWithを使用）。私がしようとしているのは、切り捨てられたPost.contentを "untruncated" Post.contentに置き換えることです。私がこれを試してみると、クリックは私のリストのすべての投稿の内容を返します。私は、クリックしている投稿の内容のみが必要です。関連するコードは次のとおりです。

<ul> 

    {% for post in object_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr> 
     <div class="panel panel-default col-sm-offset-1 col-sm-8"> 
    <p><h4><B><a class="title" href="/posts/{{ post.id }}/">{{post.title }}</a></B></h4></p> 
        <p style="color:gray">Author: 
      <a style="color:darkgray" href="{% url 'accounts:profile' %}"> <span class="link">{{ user.first_name }} {{ user.last_name }}</span></a></p> 
     <hr style=""> 
     <div class="post" > 
      <h5 style="color: rgba(101, 106, 106, 1)">{{post.content|truncatechars:250 }}</h5> 
     </div> 
      <div class="expandContent"> 
      <button class="btn btn-primary btn-sm">Read</button> 
      </div> 
      <br> 
     <br> 
     <br> 
     <div class="content"> 
      <p>{{ post.content }}</p> 
     </div> 
     </div> 
     <br> 

    {% endfor %} 

</ul> 

上記は私の基本的なリストです。 Post.contentを拡張するJSがここにあります。

<script src="{% static 'posts/jquery-3.1.1.js' %}"></script> 
<script type="text/javascript"> 
$(".expandContent").click(function(){$(".post").replaceWith($('.content')); 
}); 

</script> 

これ以上の情報やコードが役立つ場合は、私に知らせてください。それがすべて関連している場合、このプロジェクトはDjango 1.10です。ありがとうございました！

Answer 1

あなたはこの

<ul> 

    {% for post in object_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr> 
     <div class="panel panel-default col-sm-offset-1 col-sm-8"> 
    <p><h4><B><a class="title" href="/posts/{{ post.id }}/">{{post.title }}</a></B></h4></p> 
        <p style="color:gray">Author: 
      <a style="color:darkgray" href="{% url 'accounts:profile' %}"> <span class="link">{{ user.first_name }} {{ user.last_name }}</span></a></p> 
     <hr style=""> 
     <div class="post" > 
      <h5 style="color: rgba(101, 106, 106, 1)">{{post.content|truncatechars:250 }}</h5> 
     </div> 
      <div class="expandContent"> 
      <button class="btn btn-primary btn-sm" onclick="replace("content-1">Read</button> 
      </div> 
      <br> 
     <br> 
     <br> 
     <div class="content" id="content-1"> 
      <p>{{ post.content }}</p> 
     </div> 
     </div> 
     <br> 

    {% endfor %} 

</ul> 

ような何かを行うことができますし、交換する機能で、あなたはそれをgetElementByIdをして表示することができます。