使用jquery查找引用var的父div的id

我是jquery新手，所以请原谅我，如果这是一个简单的任务，但我在这里尝试做的是双重的。我的页面上可以有1到4个显示面板，每个面板上都有一个按钮。每个显示面板应独立于其他面板，但显示与其他面板相同的内容（想想一本书，能够在每个窗格中查看一本教科书的4个不同章节，其中一个窗格中的导航不会影响另一个窗格的内容）

我试图通过复制显示面板代码来实现这一点，但为每个面板提供不同的id（即panel1、panel2、panel3、panel4），然后为每个面板提供相应的jquery对象（命名与显示面板的id相同）。因此，当单击其中一个按钮时，我希望找到父面板的id，并将其用作对象的变量名（如果可能的话）

这是我试图做的精简版本。按下导航按钮

<div class="other-stuff">
    <div id="pane11" class="display-panel">
        <div class="row">
            <div class="nav">
                <button type="button" class="nav-button">Button</button>
            </div>
        </div>
    </div>
</div>

然后我想做一些类似于这个伪脚本的事情：

$(document).ready(function () {
    $(".advance-content").click(function() {
        var panel = existing displayPanel with name matching id of parent displayPanel;
        panel.AdvanceContent();
    });
});

---

有没有比查找父displayPanel id然后通过if-else运行它更好的方法呢？

为什么不在

displayPanel

函数中附加click事件，而不是在

document.ready

事件中？在那里，您已经知道自己在哪个面板中，所以您可以毫无问题地找到它的id。

---

然后，从document.ready事件调用每个displayPanel，一切都会正常工作。

为什么不将click事件附加到

displayPanel

函数中，而不是在

document.ready

事件中？在那里，您已经知道自己在哪个面板中，所以您可以毫无问题地找到它的id。

---

然后，从document.ready事件调用每个displayPanel，一切都会正常工作。

我相信如果没有设置标记的结构，并且按钮可能由其他标记包装，那么提供选择器的最接近的（）将是最好的选项，正如您在JSFIDLE中看到的那样

---

我相信，如果没有设置标记的结构，并且按钮可能由其他标记包装，那么提供选择器的最近标记（）将是最好的选择，正如您在JSFIDLE中看到的那样

---

我如何将jquery中的displayPanel对象与给定的显示面板相关联？您已经这样做了（尽管代码中有一些额外的引号）：

$（“#panel”+this.panelNumber）

为了确保我理解您的意思，您是说在对象体中有单击事件？（正如我在帖子中所说，我是jquery新手，请原谅我的无知）如果我将调用放在对象体中，并初始化4个对象，当我单击其中一个按钮时，它如何与这4个对象中的一个相关联？让我们看看我是否正确。我没有检查，但这将是我的第一次尝试：function displayPanel（panelNumber，curContent）{…var panel=$（“#panel”+this.panelNumber）；this.AdvanceContent=function（）{…}panel.find（“.body text”）.load（…）；…}panel.find(“.AdvanceContent”）。单击（function（）{panel.AdvanceContent（）；}）；}编辑：对不起，我不能让这个东西接受我的4个空格作为代码块。我对StackOverflow非常陌生，我做错了什么？我如何将jquery中的displayPanel对象与给定的显示面板相关联？您已经这么做了（尽管代码中有一些额外的引号）：

$（“#panel”+this.panelNumber）

为了确保我理解您的意思，您说在对象体中有单击事件？（就像我在帖子中说的，我是jquery新手，请原谅我的无知）如果我将调用放在对象体中，并初始化4个对象，当我单击其中一个按钮时，它如何与这4个对象中的一个相关联？让我们看看是否正确。我没有检查，但这将是我的第一次尝试：function displayPanel（panelNumber，curContent）{…var panel=$（“#panel“+this.panelNumber）；this.AdvanceContent=function（）{…}panel.find（“.body text”）.load（…）；…}panel.find（.AdvanceContent”）。单击（function（）{panel.AdvanceContent（）；}）}编辑：抱歉，我无法让这个东西接受我的4个空格作为代码块。我对StackOverflow很陌生，我做错了什么？这对获取id很有用，但是我如何将该id与相应的对象关联？这对获取id很有用，但是我如何将该id与对应的对象关联什么样的物体？

$(document).ready(function () {
    $(".advance-content").click(function() {
        var panel = existing displayPanel with name matching id of parent displayPanel;
        panel.AdvanceContent();
    });
});

$(function(){
        $('.nav-button').click(function (){
        var p = $(this).closest('div[class^="display-panel"]').attr('id');
        alert(p); 
    });
});