jqueryを使用したDOMナビゲーション

Question

私はjqueryへのnewbeeであり、私の仕事でjqueryを完成させるために私に割り当てられた仕事を持っています。 Test1Value

にTest2：Test2Value .....

TEST10

<bl id="delme"> 
<bt class="abst">Test1:</bt> 
<bb>Test1Value</bb> 
<bt class="abst">Test2</bt> 
<bb>Test2Value</bb> 
<bt class="abst">Test3</bt> 
<bb>Test3Value</bb>? 
<bt class="abst">Test4</bt> 
<bb>Test4Value</bb> 
<bt class="abst">Test5</bt> 
<bb>Test5Value</bb>? 
<bt class="abst">Test6</bt> 
<bb>Test6Value</bb> 
<bt class="abst">Test7</bt> 
<bb>Test7Value</bb> 
<bt class="abst">Test8</bt> 
<bb>Test8Value</bb>? 
<bt class="abst">Test9</bt> 
<bb>Test9Value</bb> 
<bt class="abst">Test10</bt> 
<bb>Test10Value</bb> 
</bl> 

今私は

のTest1のような値を取得取得するためにjqueryのを使用する必要があるが、以下のように私は、HTML DOMを持っています： Test10値

どうすればよいですか？

すべてのクラスが同じ名前を持っているため、クラスを照会することはできません。そうする別の選択肢はありますか？

Answer 1

これは以下の通り動作する必要があることを、テストされていないですが、私は、最初の考えで、考える：

var values = {}; 

$('bt.abst').each(
    function(){ 
     values[$(this).text()] = $(this).next('bb').text(); 
    }); 

JS Fiddle demo、デモは（dtとdd要素を持つdl、）実際のマークアップを使用していますいえ。

Answer 2

次のjQueryを使用して、後に続く書式の文字列の配列を作成できます。あなたが好きしかし

var valueArray = $('#delme bt').map(function() { 
    return $(this).text().replace(/^(.*):$/, '$1') + ': ' + $(this).next('bb').text(); 
}); 

今、あなたは、このような単一の文字列を作成するために.join()を使用して、文字列の配列を操作することができます。

EDIT：.map()関数内部メインラインの説明：

すなわち$(this).text().replace(/^(.*):$/, '$1') + ': ' + $(this).next('bb').text();

この行は所望の形式で連結された文字列を構成します。 2つのトリッキーなコンポーネントを打破してみましょう（無視して': '）：

1. $(this).text().replace(/^(.*):$/, '$1')：これは、マッピングループ内の現在の<bt>要素（$(this).text()）のテキストの内容を取得し、その後に任意の:を取り除くために、正規表現を使用しています終わり。あなたのサンプルHTMLでは、最初の項目には「Test1：」のテキストが含まれていましたが、他の項目には最後にコロンが付いていないため、これを行いました。このようにして、一貫した出力を保証しました（そうでなければ、最初の文字列は "Test1 :: Test1Value"でした）。
2. $(this).next('bb').text()：DOM内の現在の<bt>の次の要素のテキストが<bb>の要素になります。

これが理にかなっているかどうかを教えてください。

var results = {}; 
$("#delme bt").each() { 
    var self = $(this); 
    results[self.text()] = self.next().text(); 
} 
// results object contains bt text as keys, bb text as values 
// results["Test1:"] == "Test1Value" 

これは、そのBTそれぞれが#delmeオブジェクト内で取得し、その後、される（次のDOMオブジェクトを取得し、そこからテキストを抽出します。あなたはこのようにそれを:-)

Answer 3

を行うことができます対応するbbオブジェクト）を取得し、そこからテキストを取得し、両方を結果オブジェクトに割り当てます。

var results = []; 
$("#delme bt").each() { 
    var self = $(this); 
    results.push(self.text()) 
    results.push(self.next().text()); 
} 
// results array contains alternating bt and bb values 
// results[0] == "Test1:" 
// results[1] == "Test1Value" 

Answer 4

私は、これは行くための正しい方法であるかどうかわからないんだけど。このように行うことができるあなたの代わりにオブジェクトのBTおよびBBの値を交互に配列して結果を望んでいた場合

、これについては...

私はdiv内で複数のクラスを使用する傾向があります。つまり、要素をグループ化するクラスを作成し、次に別のクラスを作成して特異要素を識別します。単純にIDを与えることもできます。

作成できるクラスの数に制限はありません。私はクラス全体を識別子として使用します。これを行う他の方法はありますか？私は確信していますが、この方法でうまくいきます。

実際、私はおそらくこれを少し書いています。

<div class="abst test1"> 
<div class="abstTitle">Test1:</div> 
<div class="abstValue">Test1Value</div> 
</div> 

var test1Title = $('.test1 > .abstTitle').html(); 
var test1Value = $('.test1 > .abstVal').html(); 

idunno ...