Question

我正在使用$('.startb').click(function() { var myId = $(this).attr("id"); });来捕获id“startb1”我需要添加什么来通过类“flashObj”捕获id“test1”，因为它们都在同一个div容器中“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>

Answer 1

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

这种获取“startb1”id的方法的效率大约是你的15倍，因为顺便说一下jQuery必须经过多少步骤来创建$(this)对象。

此外，IE8支持querySelector，而getElementsByClassName则不支持。{/ p>

如果需要IE7及以下版本且结构可靠（即它始终是您需要的第四个孩子div），请使用：var otherId = this.parentNode.children[3].id;。

Answer 2

您可以搜索具有班级flashObj的div的兄弟姐妹：

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

Answer 3

如果您使用的是最新的jQuery版本，请使用.on（）而不是.click（）：

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

现在，您还可以映射多个事件，保留事件以供日后使用，甚至将数据传递给event.data对象等。

阅读详情：jQuery .on()

Answer 4

假设您想要使用相同的“点击”事件，以下应该可以解决问题：

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

通过点击获取div id

4 个答案: