如何使用jQuery动态命名元素id

我正在构建一个wp主题，调用所有的页面制作到主页。这些页面(post) id使用以下php id="post-<?php the_ID(); ?>"动态命名，它们最终被命名为#post-1， #post-2， #post-3等…

每个实例都以最小化状态调用主页，但每个实例都有一个按钮，允许用户最大化该部分的内容。我是通过使用jQuery来实现这一点的，当按钮被单击时，将类添加到嵌套在该部分的某些元素中。

问题是我不知道如何隔离只有在其中按钮嵌套的部分。目前，当用户单击按钮时，它将类添加到主页上的每个实例(每个页面(帖子)都被调用到主页)。

有人知道我如何写一些jQuery，将允许我的目标每个部分单独使用动态命名的帖子，而没有实际输入#post-1, #post-2, post-3, etc...到jQuery函数?

下面是我正在做的事情的简化版本:

$('.open-entry').click(function(){
    	$(".home-article").addClass("open");
	});

.content {display: none;}
    #home-article.open .content {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<article id="post-<?php the_ID(); ?>" class="home-article">
		<header class="home-closed-entry-header">
			<button class="open-entry">explore</button>
		</header> <!-- .home-closed-entry-header -->
        <div class="content">
			...some content
		</div> <!-- .content -->
	</article> <!-- .home-article -->

任何帮助都是非常感激的!谢谢!

$('.open-entry').click(function(){
    var $article = $(this).closest(".home-article").addClass("open");
    $article.find('.content').doSomething();
});

$("button").click(function() {
  var thePost = $(this).parent().parent();
  ...
});

$("button").click(function() {
  var thePost = $(this).parents("section");
  ...
});

$("button").click(function() {
  var thePost = $(this).parents("[id^=post-]");
  ...
});