Using jquery to find id of parent div to reference var

Question

I'm new to jquery, so forgive me if this is a simple task, but what I'm trying to do here is two-fold. My page can have between 1 and 4 display panels on it, and each panel has a button. Each of the display panels is supposed to act independently of the others, but shows the same content as the others (think of a book, and being able to view 4 different chapters of a text book in each of the panes, with navigation in one not affecting content of another).

I'm trying to achieve this by duplicating the display panel code, but giving each panel a different id (i.e. panel1, panel2, panel3, panel4), and then having corresponding jquery objects for each panel (named the same as the ids of the display panels). So then when one of the buttons is clicked, I want to find the id of the parent panel and use that as the var name for my object (if this is possible).

Here's the stripped down version of what I'm trying to do. Pressing the 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>

I want to find the id of the closest div.display-panel to the nav-button (in this case, panel1).

I then want to use the id as a var name in jquery. I have the following:

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');
    }
}

And then I want to do something like this pseudo-script:

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

Is there a better way to do this than finding the parent displayPanel id and then running it through an if-else?

Answer 1

I believe if the structure of your markup isnt set, and the button may be wrapped by other markup the closest(), provided with a selector would be the best option as you can see in the jsfiddle

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

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

Answer 2

Why don't you attach the click event inside the displayPanel function, instead of during the document.ready event? In there, you already know in which panel you are, so you have no problem to find its id. Then, you call each displayPanel from the document.ready event, and everything should work all right.