Have Geek Brain

Correct way to communicate between divs in jquery?

This is probably a simple question and I'm just tight. I have looked through several jquery books and nothing popped at me, I am probably missing something.

I'm looking for the "correct", best way to communicate between div / dom elements on a page?

For example, I have a page with 5 panels that show when a link is selected, they hide / show / run code that changes other fragments on the page. Something like this snippet:

<ul>
<li><div id="unique_name_1_anchor">Unique div 1</div></li>
<li><div id="unique_name_2_anchor">Unique div 2</div></li>
<li><div id="unique_name_3_anchor">Unique div 3</div></li>
<li><div id="unique_name_4_anchor">Unique div 4</div></li>
</ul>

... Somewhere else on the page

<div id="unique_name_1_panel">Some panel 1 stuff here</div>
<div id="unique_name_2_panel">Some panel2 stuff here<div>
<div id="unique_name_3_panel">Some panel3 here</div>
<div id="unique_name_4_panel">Some panel4 here</div>

The concept is that when the user clicks on the div_name_X_anchor, some actions are performed in the corresponding panel (like show / hide, etc.). What I have been doing now is parsing the ie id ($ (this) .replace ("_ anchor", "_ panel") to get the div id of the other dom element. It just seems clunky and should be better / more correct way to do it. Suggestions?

thanks

+2


a source to share


4 answers


Some ideas:



  • using the jQuery metadata plugin to add some metadata that points to the corresponding DIV. http://plugins.jquery.com/project/metadata

  • Get a declaration, use another valid DOM element or a valid attribute (rel, href) to store this information

  • If you have this data programmatically, set $('.anchor').data('correspondingPanel')

    to the appropriate ID (or some other payload).

  • If the indices will always be the same, then use jQuery's index method to get the anchor index and show the panel at the same index. http://api.jquery.com/index/

+3


a source


Do you need to use id

? Would this approach be appropriate?

Html

<ul id="anchors">
    <li><div>Unique div 1</div></li>
    <li><div>Unique div 2</div></li>
    <li><div>Unique div 3</div></li>
    <li><div>Unique div 4</div></li>
</ul>

<div id="panels">
    <div>Some panel 1 stuff here</div>
    <div>Some panel2 stuff here<div>
    <div>Some panel3 here</div>
    <div>Some panel4 here</div>
</div>


JQuery

$('#anchors div').click(function() {
    var panel = $('#panels div').eq($(this).index());
    panel.show();
})
+2


a source


something along the line

provide a li div a class called divLinks give a panel a div class called pabel

$('div.divLinks').click(function(){
    $('.panel').hide();
    $('.panel').eq($(this).index()).show();
});
0


a source


One way to use class names creatively for this.

Given:

<div id="unique_name_1_anchor">Unique div 1</div>
<div class="unique_name_1_anchor">Div 1 panel</div>

You can do something like:

$('#unique_name_1_anchor).click(function(){$('.'+this.id).show()})
0


a source






More articles:


All Articles