如何通过鼠标单击找到特定的父级并在顶级父级中获取索引

Question

如何找到特殊的父div元素。我需要在体内获取div索引。 现在，我具有在鼠标选择或单击时查找特定元素的功能。

这是我的代码：

$('div').mousedown(function(e){ /* get element selected */
      console.log(e.target);
 });
 
(function(){ /* get log message */
    console.log = function (message) {
        $('textarea').val(message.outerHTML)
    };
})();

div {
  border : 1px solid black;
}
textarea { 
  width: 100%;
  color:white; 
  background:black;
  height: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p><b>foo bar</b></p>
  <p><u>foo bar</u></p>
</div>

<div>
  <p>
     <b><i>foo bar</i></b>
  </p>
</div>

<textarea></textarea>

Answer 1

要获取点击的div的索引，可以使用$(this).index()。 index()方法从匹配的元素中搜索给定的元素，然后返回整数值，该值指示jQuery对象中相对于其同级元素的位置元素。

$('div').on('click',function(){ /* get element selected */
  console.log($(this).index('div'));
 });

div {
  border : 1px solid black;
}
textarea { 
  width: 100%;
  color:white; 
  background:black;
  height: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div>
  <p><b>foo bar</b></p>
  <p><u>foo bar</u></p>
</div>

<div>
  <p>
     <b><i>foo bar</i></b>
  </p>
</div>

Answer 2

如果javascript移至最高索引，功能textarea不起作用

$('div').on('click',function(){ /* get element selected */
  console.log($(this).index());
 });

div {
  border : 1px solid black;
}
textarea { 
  width: 100%;
  color:white; 
  background:black;
  height: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div>
  <p><b>foo bar</b></p>
  <p><u>foo bar</u></p>
</div>

<div>
  <p>
     <b><i>foo bar</i></b>
  </p>
</div>