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

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，我想存储第一个SpanIndex 和最后一个lastSpanIndex。我认为这也许可以在我跨越每个 Angular 色的部分完成，但我不知道如何做。我希望你们能理解我的问题，这并不容易解释。

<小时/>

更新

感谢迄今为止的帮助。这对学习很有帮助，但不是我真正想要的。我制作了一张图片以更清楚地表达我想要的东西。

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

Answer 1

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

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

UPDATED BELOW *UPDATED AGAIN, Fiddle moved as well*

仍然不确定你到底想做什么，但我做了一个快速的 fiddle ，我认为它展示了你想要做什么。 -> 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了解更多信息和工作 View