Question

我有一个代码

 $(".showerPr").on('click', '.prototypeDiv',function(){

 });

HTML看起来像

<div class='showerPr' data-id='3'>
<div class='prototypeDiv' data-id='5'><div>
</div>

是否有一些解决方案可以单独获取showerPr data-id和prototypeDiv data-id？

有些想法

$(this).attr('data-id');
$(this).before().attr('data-id');

： - 谢谢你。

Answer 1

.showerPr不是before() .prototypeDiv元素，它是父元素

var proto  = $(this).data('id');
var shower = $(this).parent().data('id');

$(".showerPr").on('click', '.prototypeDiv',function(){
  var proto  = $(this).data('id');
  var shower = $(this).parent().data('id');
  
  $('#result').html('prototypeDiv : ' + proto + '<br />' + 'showerPr : ' + shower)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='showerPr' data-id='3'>
    <div class='prototypeDiv' data-id='5'>Click Me !!!<div>
</div>

<br/><br/>
<div id="result"></div>

Answer 2

@adeneo是对的，.showerPr是父元素。您可以查看Traversing Methods for jQuery。

以下是摘录。

$(".prototypeDiv").on('click', function(){
  alert($(this).data('id'));
  alert($(this).parent().data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='showerPr' data-id='3'>
  <div class='prototypeDiv' data-id='5'>123<div>
</div>

JQuery DOM得到了Binded属性

2 个答案: