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

Question

我是jquery的新手,所以请原谅我这是一项简单的任务,但我在这里要做的事情是双重的.我的页面上可以有1到4个显示面板,每个面板都有一个按钮.每个显示面板应该独立于其他显示面板,但显示与其他显示面板相同的内容(想象一本书,并且能够在每个窗格中查看教科书的4个不同章节,导航在一个不影响他人的内容).

我试图通过复制显示面板代码来实现这一点,但是给每个面板一个不同的id(即panel1,panel2,panel3,panel4),然后为每个面板提供相应的jquery对象(命名与id的ids相同)显示板).因此,当单击其中一个按钮时,我想找到父面板的id并将其用作我的对象的var名称(如果可能的话).

这是我正在尝试做的精简版.按nav-button,

<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>

我想找到的最接近的ID div.display-panel的nav-button(在这种情况下,panel1).

然后我想在jquery中使用id作为var名称.我有以下内容:

var panel1 = displayPanel(1, 1);
var panel2 = displayPanel(2, 1);
var panel3 = displayPanel(3, 1);
var panel4 = displayPanel(4, 1);

function displayPanel(panelNumber, curContent) {
    this.panelNumber = panelNumber;
    this.curContent= curContent;

    this.AdvanceContent = AdvanceContent;
    function AdvanceContent() {
        if ((this.curContent + 1) <= contentList.length - 1) {
            this.curContent++;
        } else {
            this.ResetContent();
        }
        $("#panel" + this.panelNumber).find(".body-text").load('html/' + contentList[this.curContent] + '.html');
    }

    this.ResetContent= ResetContent;
    function ResetContent() {
        this.curContent = 0;
        $("#panel" + this.panelNumber).find(".body-text").load('html/' + contentList[this.curContent] + '.html');
    }
}

然后我想做一些像这样的伪脚本:

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

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

Answer 1

我相信如果你的标记结构没有设置,并且按钮可能被其他标记包裹,那么最接近的(),提供选择器将是最好的选择,你可以在jsfiddle中看到

http://jsfiddle.net/isibbot/V8wr2/

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