如何使用 jQuery (wordpress) 定位动态命名的元素 ID

Question

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

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

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

有谁知道我如何编写一些 jQuery，让我可以使用动态命名的帖子分别定位每个部分，而无需在 jQuery 函数中实际输入 #post-1, #post-2, post-3, etc...？

这是我正在做的事情的简化版本：

$('.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 -->

一如既往地非常感谢任何帮助！ 谢谢！

Answer 1

使用遍历。在事件处理程序内this 指的是发生在的元素事件。鉴于作为起点，您可以遍历所需的 dom 部分

closest() 可以将您带到主要的<article>，然后您可以从那里使用find() 查看该实例

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

Answer 2

根据您的示例，您可以通过几种方法从按钮的上下文中隔离section。

如果结构总是<section><header><button>，那么从按钮开始你就可以向上两个父母：

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

如果按钮上方只有一个section 元素，那么您可以查找作为部分元素的父元素：

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

如果您正在寻找 ID 以“post-”开头的父母，您可以将 ID 视为属性并使用“属性以”选择器：

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