CODEWITHSUNDEEP
javascriptjqueryhtml
Blainer
Blainer

Reputation: 2702

grabbing div id by click

I am using $('.startb').click(function() { var myId = $(this).attr("id"); }); to capture the id "startb1" what do I need to add to also capture the id "test1" by the class "flashObj" by using the fact they are all in the same div container "audioContainer"

<div class="audioContainer">
            <div class="audioTitle">hi</div>
            <div class="playerHolder">
            <div class="startb" id="startb1" rel="Audio/004_IAM_God_is_Love.mp3"><img src="dbs/images/start.png" width="40" height="40" /></div>
            <div class="flashObj" id="test1"></div>
            <div class="mp3Logo"><a href="Audio/004_IAM_God_is_Love.mp3"><img src="dbs/images/mp3_off.gif"/></a></div>
            </div>
</div>

Upvotes: 0

Views: 246

Answers (4)

Alon Valadji
Alon Valadji

Reputation: 628

Use .on() instead of .click() if you are using latest jQuery release:

$(".audioContainer").on("click", ".startb", function(e){
    var _this = $(this);
    var id = _this.attr("id");
    var oId = _this.closest(".audioContainer").find(".flashObj").attr("id");
}

Now you can also map multiple events, keep events for later on and even pass data to the event.data object and etc.

Read more at: jQuery .on()

Upvotes: 1

Michael Erickson
Michael Erickson

Reputation: 4445

Assuming you want to use the same "click" event, the following should do the trick:

$('.startb').click(function() {
    var myId = $(this).attr("id");
    var flashID = $(this).parent().find(".flashObj").attr("id");
});

Upvotes: 0

Stelian Matei
Stelian Matei

Reputation: 11623

You could search for siblings of the div having the class flashObj:

$('.startb').click(function() { 
   var myId = $(this).attr("id"); 
   var flashObjID = $(this).siblings('.flashObj').attr('id');
});

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

var myId = this.id;
var otherId = this.parentNode.querySelector(".flashObj").id;

This method of getting the "startb1" id is approximately 150 times more efficient than yours, due to the amount of steps jQuery has to go through just to create the $(this) object, by the way.

Also, querySelector is supported in IE8 whereas getElementsByClassName isn't.

If IE7 and below is required, and the structure is reliable (ie. it will always be the fourth child div you need), use: var otherId = this.parentNode.children[3].id;.

Upvotes: 2

Related Questions