在Mousedown - Grab Children（数字）位置

Question

小提琴 - http://liveweave.com/6RQOf4

我知道我可以使用$(element).children().length来获取元素的整个子项列表的数值，但是如何获取特定子项的位置？

这是我正在努力学习的图片

非常感谢任何帮助。

的JavaScript / JQuery的：

$(".spectacle-contenu *").on('mousedown touchstart', function() {
  $(".grab-contenu").val(
    $(".spectacle-contenu").children().length
  );
});

HTML ：

<input type="text" class="grab-contenu" />
<div class="spectacle-contenu">
  <div class="objet">première</div>
  <div class="objet">deuxième</div>
  <div class="objet">troisième</div>
  <div class="objet">quatrième</div>
  <div class="objet">cinquième</div>
  <div class="objet">sixième</div>
  <div class="objet">septième</div>
  <div class="objet">huitième</div>
  <div class="objet">neuvième</div>
  <div class="objet">dixième</div>
</div>

Answer 1

通过孩子们进行循环，并比较该孩子是否是您点击的孩子。返回索引。

http://liveweave.com/A0KcZC

编辑：使用传递index类的objet函数获得更好的方法。 http://liveweave.com/QGWbWV

Answer 2

这有效：

$('.spectacle-contenu').children().on('mousedown touchstart', function () {
    $('.grab-contenu').val($(this).index() + 1);
});

JSFiddle example。如果你想要一个基于0的索引，你可以摆脱+1。

您使用的是.length，即：

  

描述：jQuery对象中的元素数。

通过尝试获取.length，您获得了父项中元素的数量，而不是您想要的元素索引。

Answer 3

您需要使用.index()，我已将事件绑定到objet元素

使用

$(document).ready(function() {
  $(".spectacle-contenu").on('mousedown touchstart', '.objet', function() {
    $(".grab-contenu").val($(this).index() + 1);    
  });
});

DEMO