JQuery: Get specific values from multiple anchor binding?

Question

var myCode = {};

(function( global ) {
     global.print = function(value){
                   alert("Values: " + value);
                }
            })(myCode);


$(document).ready(function(e) {
    $('[id^=el]').bind("click", function(e) {
        myCode.print("Value");
    });

});

I have this list of anchor elements:

<li>
    <a id="el1"><h3>header 1</h3><p>paragraph 1</p></a>
</li>
<li>
    <a id="el2"><h3>header 2</h3><p>paragraph 2</p></a>
</li>
<li>
    <a id="el3"><h3>header 3</h3><p>paragraph 3</p></a>
</li>
<li>
    <a id="el4"><h3>header 4</h3><p>paragraph 4</p></a>
</li>

How can I bind multiple elements withou writing the binding one If anchor el4 is clicked I want to print Values: header 4, paragraph 4 So how can I get in Jquery the header or paragraph of the respective anchor that is clicked on?

For one, your HTML isn't valid. You can't nest block-level elements inside of inline elements. — Shmiddty
– Shmiddty, Commented Sep 4, 2012 at 14:24

Mark Pieszak - Trilon.io · Accepted Answer · 2012-09-04 14:22:08Z

1

Looks like this would do it, you need to grab the text value of the h3 & paragraph tags inside of each anchor you're clicking.

$('[id^="el"]').bind("click", function(e) {
    myCode.print($(this).find('h3').text() + ', ' + $(this).find('p').text());
});

answered Sep 4, 2012 at 14:22

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Codegiant · Accepted Answer · 2012-09-04 14:39:39Z

1

try this

HTML

<li>
    <a id="el1"><h3>header 1</h3><p>paragraph 1</p></a>
</li>
<li>
    <a id="el2"><h3>header 2</h3><p>paragraph 2</p></a>
</li>
<li>
    <a id="el3"><h3>header 3</h3><p>paragraph 3</p></a>
</li>
<li>
    <a id="el4"><h3>header 4</h3><p>paragraph 4</p></a>
</li>

JS CODE

var myCode = {};

(function( global ) {
     global.print = function(value){
                   alert("Values: " + value);
                }
            })(myCode);


$(document).ready(function(e) {
    $('[id^=el]').bind("click", function(e) {
        myCode.print($(this).find('h3').text()+ '  '+ $(this).find('p').text());
    });

});

edited Sep 4, 2012 at 14:39

answered Sep 4, 2012 at 14:26

Codegiant

2,1501 gold badge22 silver badges31 bronze badges

3 Comments

Eduard Florinescu Over a year ago

I want to get them separatelly, like the other answer that does it with find()

Codegiant Over a year ago

sorry i can't see you in time.

Eduard Florinescu Over a year ago

Today I finished the votes but tomorrow I will have some again :)

Collectives™ on Stack Overflow

JQuery: Get specific values from multiple anchor binding?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related