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的范围，例如： startIndex - ＆gt; 0和长度 - ＆gt; 2。其中startIndex =＆＃34; Barrack＆＃34;是第0区，巴拉克和奥巴马的范围是2格。

Answer 1

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

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

修改

获取div的索引

$(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>

result_dict = {}
for idx, owner in df['owner'].iteritems():
    result_dict[owner] = flickr.people.getInfo(user_id=owner)

Answer 2

使用jQuery的切片功能。

.slice( start [, end ] )

start ➡一个整数，表示从0开始选择元素的位置。如果为负，则表示距离集合末尾的偏移量。

结束➡一个整数，表示停止选择元素的从0开始的位置。如果为负数，则表示偏移量   集的结尾。如果省略，范围将持续到结束   集合。

根据您的情况，只选择 Barack ＆amp;来自多个 div 元素的奥巴马，我会写一些类似的内容：

$( "div" ).slice(0, 1).css( "background-color", "red" );

jQuery.slice() method

Answer 3

你去吧

<div class="findIndex">
  <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>
</div>
<button id="btnClick"> Click me </button>

var indexRange = [];
$(".findIndex div").on("click",function(){
  if(indexRange.length == 0){
      indexRange[0] = $(this).index();
  }else{
    indexRange[1] = $(this).index();
  }
})

$("#btnClick").on("click",function(){
    if(indexRange.length == 2){
        alert("Start Index:" + indexRange[0] + "\n" + "End Index:" + indexRange[1] + "\n" + "Length:" + ((indexRange[1] - indexRange[0]) + 1));
    }else{
        alert("Please select start and end first.");
    }
    indexRange = Array();
})

这是小提琴： https://jsfiddle.net/vsmdcc3L/

Answer 4

您可以尝试$.each()或$(selector).each()

<script>
    $(document).ready(function(){
        var lastIdx = 0;
        $("div").each(function(idx, item){
            $(this).click(function(){
                if (idx > lastIdx) {
                    console.log("start:" + lastIdx);
                    console.log("length:" + (idx - lastIdx + 1));
                } 
                lastIdx = idx;
            });
        });
    });
</script>

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

4 个答案:

修改