オブジェクトにスパン配列の最初のインデックスと最後のインデックスを割り当てます。

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

それは一定時間後に新しいものを示しているように、私も、私は、各セクションのための期間を保存する配列/オブジェクトを（それを呼び出しているかわからない）持っています。 「section_2と」内の例えば各DIV、私はfirstSpanIndexと最後lastSpanIndexを保存するための上記のようspansという名前の配列は、あり

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

。私はこれが多分私はすべての文字にまたがる部分で行うことができると思うが、私は方法を知らないだろう。 皆さん、私の質問を理解していただければ幸いです。これまでの援助のための

---

更新

感謝。それは学習の目的のために役立つが、本当に私が望むものではない。私は自分が望むものをより明確にするためにイメージを作った。

私はイメージが十分に明確であると思います。 4つのパラグラップをスパンごとに分割して表示します。これらのスパンはすべて1つの配列にあります。その配列には何もありません（最初も最後もありません）。次に、id（インデックスatmに等しい）および表示する必要がある秒数（イメージには表示されません）、およびスパン配列の開始および終了インデックスなど、各段落のdata.sections情報が保持されます。

Answer 1

各セクションについて、最初と最後のインデックスをデータ属性に書き込みます。

firstIndexとLastIndexの場合は、あなたのin sectionに基づいてオフセットが必要です。

firstIndexの場合、スパン文字がループ内の最初の文字かどうかを確認します。もしそうであれば、インデックス値を計算します。 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()関数は、あなたが望むように機能するでしょうか？ たとえば、あなたは言うことができますか？ * が再び更新BELOW UPDATED

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

は、フィドルは同様に*

まだ

正確にあなたが何をしたいのかわからないを移動し、しかし、私は私が実証考える迅速なバイオリンを作りましたあなたがしようとしていること。 - >my jsFiddle MOVED!!! HERE!!!

あなたのコードを少し書き直して、各セクションをsectionという名前のクラスに変更しました。あなたのセクションは必ずしも必要ではないが、彼らがしていたオブジェクトによってHTMLで知られているであろうが登場するので が、私はこれをしなかった私は、以下のリライト説明します：。詳細についてはFiddleをチェックアウトしてください

// 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")); 
    }); 
}); 

をおよび作業ビュー

Answer 3

あなたはthisとthisをチェックアウトする場合があります。リンクをクリックしたときにGoogle Chromeを使用すると、正しく表示されません。彼らはあなたが達成しようとしているものについてあなたを助けることができるかもしれません。

Answer 4

私はrigthあなたをキャッチした場合、あなたはこの必要があるかもしれません：

<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はdiv要素がありませんのでご注意下さいsection_0とそう最初に使用可能なスパンは、あなたがフィドルhttp://jsfiddle.net/u5MMJ/

がここに広告と他の一つだ持ってdata.sectionsここ1

のGになりますIV section_0 http://jsfiddle.net/QqjHK/

（もちろんどちらの場合も、コンソールをチェックしてください）