javascript - 如何使用 jQuery 从一组 div 中获取 div 元素的索引和范围

Question

如果我有一组如下所示的标记化 div。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div> Barrack </div>
<div> Obama </div> 
<div> was </div>
<div> the </div>
<div> president </div>
<div> of </div>
<div> the </div>
<div> United </div>
<div> States </div>
<div> from </div>
<div> the </div>
<div> year </div>
<div> 2012 </div>
<div> to </div>
<div> 2016 </div>
<div> . </div>

<button id="btnClick"> Click me </button>

<script>
$(function(){

$('#btnClick').click(function(){
var selection = window.getSelection();
alert(selection);
});

});
</script> 

我已经尝试过以上

1)当我在鼠标单击事件上单击多个div时，我想获取div的索引。 例如，如果我单击包含 Barrack 和 2012 的 div，我无法获取所选 div 的索引。

2) 如果我选择同时包含 Barrack 和 Obama 的 div 我想要 div 的范围，例如: 起始索引 -> 0 和长度 -> 2。 其中 startIndex = "Barrack"是第 0 个 div，范围是 Barrack 和 Obama 2 个 div。

Answer 1

像这样的事情应该可以解决问题。这是你想要的吗？

  var selectedDiv = [];

  $("div").click(function() {
    selectedDiv.push($(this).text());
  });

编辑

获取div的索引

 var indexNo = $("div").index($(this));

$(function() {
  var selectedDiv = [];

  $("div").click(function() {
    $(this).addClass("selected");
    var indexNo = $("div").index($(this));
    selectedDiv.push(indexNo);
    // selectedDiv.push($(this).text());
  });

  $('#btnClick').click(function() {
    // var selection = window.getSelection();
    alert(selectedDiv);
  });

});

div {
  width: 100px;
  background: #00f;
  color: #fff;
  margin: 3px;
  cursor: pointer;
}
div.selected {
  background: #f0f;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div> Barrack </div>
<div> Obama </div>
<div> was </div>
<div> the </div>
<div> president </div>
<div> of </div>
<div> the </div>
<div> United </div>
<div> States </div>
<div> from </div>
<div> the </div>
<div> year </div>
<div> 2012 </div>
<div> to </div>
<div> 2016 </div>
<div> . </div>

<button id="btnClick"> Click me </button>