将范围数组的第一个索引和最后一个索引分配给对象

Question

我正在制作某种带有网页的电影。为此，我必须用文字的字符做某些事情。该html看起来像这样：

<div id="section_1" style="display: none;"> 
     <p>Goede typografie stimuleert het lezen en heeft als gevolg dat men zo weinig mogelijk moeite hoeft te doen om een tekst te kunnen lezen. Het moet zo min mogelijk weerstand oproepen om een tekst te kunnen begrijpen.</p> 
</div> 

<div id="section_2" style="display: none;"> 
    <p>Het vermogen om zeer snel te kunnen lezen en zodoende onze tijd effectief te kunnen gebruiken, hangt vooral af van de wijze waarop de boodschap typografisch is vormgegeven.</p> 
</div> 

要使用字符，我跨越每个字母。如下图所示：

var spans = new Array(); 


// span every character 
for(var i = 0; i < data.sections.length; i++) { 
    //spanEachChar("#section_"+i); 
    $("#section_"+i).children().andSelf().contents().each(function(index){ 
    if (this.nodeType == 3) { 
     var $this = $(this); 
     $this.replaceWith($this.text().replace(/\w/g, function(text,index2) { 
      return "<span id="+index2+">" + text + "</span>"; 
     })); 
    } 
    }); 
} 

// store each span in an array 
$("#content span").each(function() { 
    spans.push($(this)); 
}); 

console.log("spans.length "+spans.length); 

// get them like this 
var span = spans[20]; 

我也有一个数组/对象（不知道它叫什么），我存储每个部分的持续时间，使其显示一定时间后的新一个。

var data = { 
      sections:[{ 
       id: 0, 
       duration: 0, 
       firstSpanIndex: -1, 
       lastSpanIndex: -1 
      }, { 
       id: 1, 
       duration: 7, 
       firstSpanIndex: -1, 
       lastSpanIndex: -1 
      }, { 
       id: 2, 
       duration: 7, 
       firstSpanIndex: -1, 
       lastSpanIndex: -1 
      }] 
    } 

有名为spans阵列，如上所示，对于“section_2”各自的div例如，我想存储firstSpanIndex和最后lastSpanIndex是。我想这也许可以在我跨越每个角色的部分完成，但我不知道如何。 我希望你们能理解我的问题，这不是很容易解释。

---

更新

感谢您的帮助迄今。这对学习的目的是有帮助的，但不是我想要的。我做了一个形象，以更清楚我想要什么。

我希望图像足够清晰。它显示了每个字符的跨度分为4个段落。所有这些跨度都在一个数组中。没有更多的数组（所以不是第一个或最后一个）。然后，data.sections会为每个段落保存信息，如id（等于索引atm）以及它应显示多少秒（图像中不显示）以及span数组的开始和结束索引。

Answer 1

对于每个节，将第一个和最后一个索引写入数据属性中。

对于firstIndex和LastIndex，您将需要基于哪个部分的偏移量。

对于firstIndex，检查span字符是否是循环中的第一个 - 如果是，则计算它的索引值。

对于lastIndex的，只是不停地设定偏移值之后，您已处理完毕（在循环中的最后一次，它会设置正确的值。）

然后，别的地方，你可以建立自己的部分阵列为每个跨度抓取数据属性值'data-first-index'和'data-last-index'。

for(var i = 0; i < data.sections.length; i++) { 

    // get the offset for this section - if it's the first one, set it's value to -1 
    // if it's not the first one, set it as the data-last-index value 
    var offset = i == 0 ? -1 : $('#section_'+i).attr('data-last-index'); 

    // for each character in your section 
    for(var j = 0; j < <number of characters in the section>; j++) { 

    var $el = $('#section_'+i); // cache the dom el 

    // set first index - it's simply just the previous lastindex + curr pos + 1 
    if (index == 0) { 
     $el.attr('data-first-index', offset + j + 1); 
    } 

    // set last index (everytime, last one in the loop is the last index) 
    $el.attr('data-last-index', offset + j); 

    }); 
} 

// now you can build your sections array and populate the firstIndex and lastIndex values 
// by going $('section_X').attr('data-first-index') => firstIndex value 
// and $('section_X').attr('data-last-index') => lastIndex value 

Answer 2

请问jQuery的.first()和.last()函数可以做你想做的事吗？例如，你可以说;

// Grabs the first span only, then it's index value 
firstSpanIndex: $this.children("span").first().index(); 

低于修订 * 再次更新，小提琴移动以及 *

仍不能确定正是你想做的事，但我很快做出了小提琴，我想演示你正在尝试做什么。 - >my jsFiddle MOVED!!! HERE!!!

我重写了一下你的代码，并且改变了每一节以包含一个名为section的类。 我这样做是因为它出现的部分将通过HTML已知的，但不一定是他们的目标，我会在下面解释重写：

// This first line simply calls each section by its class tag and begins the means of operation 
$(".section").each(function(i) { // using var i in the function i can keep up with 0 based index of each section i am going thru 
    if (!data.sections[i]) { // this simply checks to see if this section exist in array yet, if not, we create it with base params 
     data.sections[i] = [{ 
      id: i, 
      duration: 0, 
      firstSpanIndex: -1, 
      lastSpanIndex: -1 
     }] 
    }; 
    // add your type oof id to each section if you still want it 
    var $this = $(this).attr({ id: "section_"+i }); 
    // this .each is like a "catchall" to ensure you go thru wach p child of your section and span each char 
    $this.children("p").each(function(ii) { 
     // save the initial text to a variable for spaning 
     var tt = $(this).text(); 
     // begin your spanning technique, not bad btw 
     $(this).html(tt.replace(/\w/g, function(txt, id2) { 
      return "<span id="+id2+">"+txt+"</span>"; 
     })); 
     // update the section information in your data array 
     data.sections[i].firstSpanIndex = $(this).children("span").first(); 
     data.sections[i].lastSpanIndex = $(this).children("span").last(); 
     // made a fatal flaw using .extend as each section of spans get the same id presence, 
     // changed this to .merge which will extend the array regardless of index values 
     $.merge(true, spans, $(this).children("span")); 
    }); 
}); 

一定要了解更多信息请查看Fiddle和工作视图

Answer 3

您可能想要查看this和this。点击链接时使用谷歌浏览器，否则将无法正常显示。他们可能能够帮助你解决你想要实现的目标。

Answer 4

如果我发现你分辩，你可能需要这样：

<head> 
<script> 

$(document).ready(function(){ 

var data = { 
    sections: [ 
     { 
      id: 0, 
      duration: 0, 
      firstSpanIndex: -1, 
      lastSpanIndex: -1 
     }, { 
      id: 1, 
      duration: 7, 
      firstSpanIndex: -1, 
      lastSpanIndex: -1 
     }, { 
      id: 2, 
      duration: 7, 
      firstSpanIndex: -1, 
      lastSpanIndex: -1 
     }] 
} 

var spans = new Array(); 


// span every character 
var counter = 0; 
for(var i = 0; i < data.sections.length; i++) 
{ 
    //spanEachChar("#section_"+i); 
    $("#section_"+i).children().andSelf().contents().each(function(index) 
    { 
     if (this.nodeType == 3) 
     { 
      var $this = $(this); 
      $this.replaceWith($this.text().replace(/\w/g, function(text,index2) 
      { 
       if (data.sections[i].firstSpanIndex == -1) 
       { 
        data.sections[i].firstSpanIndex=counter; 
       } 
       data.sections[i].lastSpanIndex=counter; 
       counter++; 
       return "<span id="+index2+">" + text + "</span>"; 
      })); 
     } 
    }); 
} 

// store each span in an array 
$("#content span").each(function() { 
    spans.push($(this)); 
}); 

//console.log("spans.length "+spans.length); 

// get them like this 
//var span = spans[22]; 
//console.log(span); 

console.log(data); 

}); 
</script> 
</head> 

<body> 

<div id="content"> 
    <div id="section_1" style="display: none;"> 
     <p>Goede typografie stimuleert het lezen en heeft als gevolg dat men zo weinig mogelijk moeite hoeft te doen om een tekst te kunnen lezen. Het moet zo min mogelijk weerstand oproepen om een tekst te kunnen begrijpen.</p> 
    </div> 

    <div id="section_2" style="display: none;"> 
     <p>Het vermogen om zeer snel te kunnen lezen en zodoende onze tijd effectief te kunnen gebruiken, hangt vooral af van de wijze waarop de boodschap typografisch is vormgegeven.</p> 
    </div> 
</div> 

</body> 

请注意，data.sections [0] .firstSpanIndex和data.sections [0] .lastSpanIndex保持-1，因为有不派息与section_0所以第一个可用的跨度将是data.sections 1

这里有一个小提琴http://jsfiddle.net/u5MMJ/

这里的G是另一个与广告四section_0向您展示的差别http://jsfiddle.net/QqjHK/

（检查过程中的两种情况下，控制台）