Question

我需要单独使用子元素的id。如果我使用$(this).attr('id')，它也会带来父级的ID。

这是代码，

<body>
    <div id="divOne">
        <div id="divTwo">
            <div id="divThree">
                <div id="divFour">
                </div>
            </div>
        </div>
    </div>
</body>

单击时，我需要div 4的id

Answer 1

使用event.stopPropagation阻止事件传播到父div：

＆＃13;

$('div').click(function(e) {
  e.stopPropagation();
  console.log(this.id);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOne">
  <div id="divTwo">
    <div id="divThree">
      <div id="divFour">
      test
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您需要使用event.stopPropagation();来停止传播到父元素：

工作示例

$(document).ready(function(){
  $('div').click(function(event){
    event.stopPropagation();
    console.log($(this).attr('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="divOne">
        <div id="divTwo">
            <div id="divThree">
                <div id="divFour">
                four
                </div>
            </div>
        </div>
    </div>
</body>

不工作示例

$(document).ready(function(){
  $('div').click(function(event){
    console.log($(this).attr('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="divOne">
        <div id="divTwo">
            <div id="divThree">
                <div id="divFour">
                four
                </div>
            </div>
        </div>
    </div>
</body>

event.stopPropagation（）; 阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

Answer 3

使用

console.log(event.target.id)

而不是

$(this).attr('id')

因为this等于你绑定的元素，而event.target等于触发事件的元素

使用jquery单独获取子div的id

4 个答案: