如何使用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的范圍，例如：startIndex->​​ 0和length->2。其中，startIndex =“ Barrack”是第0個div，范圍為2 divs Barrack和奧巴馬。

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> 

Answer 2

使用jQuery的slice函數。

.slice( start [, end ] )

開始 ➡指示在其中元素開始將被選擇的基於0的位置的整數。 如果為負，則表示距集合末端的偏移量。

結束指示➡處停止被選擇的元素的基於0的位置的整數。 如果為負，則表示距集合末端的偏移量。 如果省略，范圍將一直持續到設置結束。

對於您的情況，要從多個div元素中僅選擇Barack ＆ Obama ，我將編寫以下內容：

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

jQuery.slice（）方法

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>