Javascript 将跨度数组的第一个索引和最后一个索引分配给对象

我在拍一部有网页的电影。为此，我必须用文本的字符做一些事情。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>

上面显示了名为

span

的数组，对于每个div，例如“section_2”，我想存储firstSpanIndex和lastSpanIndex。我想这也许可以在我跨越每个角色的部分完成，但我不知道如何做到。 我希望你们能理解我的问题，解释起来并不容易

---

更新

谢谢你迄今为止的帮助。这对学习很有帮助，但不是我真正想要的。我制作了一个图像来更清楚地说明我想要什么

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

jQuery和函数是否可以实现您想要的功能？ 比如，你能说

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

更新如下*再次更新，小提琴也移动了*

我仍然不确定你到底想做什么，但我做了一个快速的小提琴，我认为它展示了你想做什么。->

我稍微重写了您的代码，并更改了每个部分以包含一个名为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"));
    });
});

//第一行仅通过其class标记调用每个节，并开始操作
$（“.section”）.each（function（i）{//在函数中使用var i，我可以跟踪我要处理的每个节的基于0的索引
如果（！data.sections[i]）{//这只是检查数组中是否存在此节，如果不存在，则使用基本参数创建它
数据.第[i]节=[{
id:我，
持续时间：0，
firstSpanIndex:-1，
最新指数：-1
}]
};
//如果仍然需要，请将类型oof id添加到每个部分
var$this=$（this.attr（{id:“section_uu”+i}）；
//每一个都像一个“catchall”，以确保您通过分区的wach p子级并跨越每个字符
$this.children（“p”）。每个（功能（ii）{
//将初始文本保存到变量中以进行跨距
var tt=$（this.text（）；
//开始你的跨越技术，顺便说一句，不错
$（this）.html（tt.replace（/\w/g，函数（txt，id2）{
返回“+txt+”；
}));
//更新数据数组中的节信息
data.sections[i].firstSpanIndex=$（this.children（“span”）.first（）；
data.sections[i].lastSpanIndex=$（this.children（“span”）.last（）；
//使用.extend创建了一个致命缺陷，因为跨距的每个部分都具有相同的id，
//将此更改为.merge，它将扩展数组，而不考虑索引值
$.merge（true，span，$（this）.children（“span”）；
});
});

---

请务必查看以获取更多信息和工作视图。对于每个部分，请在数据属性中写入第一个和最后一个索引

对于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

for（var i=0；ifirstIndex值
//和$（'section_X'）.attr（'data-last-index'）=>lastIndex值

您可能希望签出并删除。当你点击链接时使用谷歌浏览器，否则它们将无法正常显示。他们可能会帮助你完成你想要实现的目标。

如果我发现你做得对，你可能需要：

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

$（文档）.ready（函数（）{
风险值数据={
章节：[
{
id:0，
持续时间：0，
firstSpanIndex:-1，
最新指数：-1
}, {
id:1，
持续时间：7，
firstSpanIndex:-1，
最新指数：-1
}, {
id:2，
持续时间：7，
firstSpanIndex:-1，
最新指数：-1
}]
}   
var span=新数组（）；
//跨越每个字符
var计数器=0；
对于（var i=0；ifor(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

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