获取被点击的li元素内第一个div的id。

Question

<li class="intro-item">
    <a href="...">Something</a>
        <div id="bar1"></div>
        <div id="bar2"></div>
        <div id="bar3"></div>
        <div id="bar4"></div>
        <div id="bar5"></div>
</li>

当点击li时，我想获取第一个div的id（这里是bar1）。还有更多与上面相同的lis。所有这些lis也都有CSS类“intro-item”。当我单击每个li时，我想获取第一个div的id。

思路如下：

$('li.intro-item').click(function(){
    alert($('(this) div:first').attr('id'));// here I can't apply this keyword that's the problem.
    });

- Prasad Lakmal

Answer 1

将this作为上下文传递给jQuery。

$('li.intro-item').click(function () {
    alert($('div:first', this).attr('id')); //or $(this).find('div:first')
});

- Arun P Johny

Answer 2

使用 $(this) 获取当前 li 对象，使用 .find() 查找 div 元素，.eq(0) 用于获取第一个索引。

$('li.intro-item').click(function(event){
    event.preventDefault();
    alert($(this).find('div:eq(0)').attr('id'));
});

代码示例

- Sudharsan S

Answer 3

$('li.quiz-intro-item').click(function(){
   alert($(this).find("div:first").attr("id"));
});

- Keith A

Answer 4

使用这个：

<li class="intro-item">
    <a href="#">Something</a>
    <div id="bar1">1</div>
    <div id="bar2">2</div>
    <div id="bar3">3</div>
    <div id="bar4">4</div>
    <div id="bar5">5</div>
</li>
<li class="intro-item">
    <a href="#">Something</a>
    <div id="bar21">21</div>
    <div id="bar22">22</div>
    <div id="bar23">23</div>
    <div id="bar24">24</div>
    <div id="bar25">25</div>
</li>

这段JavaScript和jQuery代码：

$("li.intro-item").click(function () {
    // this is the 'clicked' DOM Element
    // use $(this) to wrap it into a jQuery wrapped set
    alert($(this).find("div:first").attr('id'));
});

您有可点击的li，打开一个带有li第一个div的id的警报。

- André R.