通過jquery的DOM導航

我是jquery的新手，並且有一些工作分配給我，以便在我的工作中使用jquery完成。我有HTML DOM如下通過jquery的DOM導航

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

現在我需要使用jQuery來獲取得到像

Test1的值：Test1Value

的Test2：Test2Value .....

Test10： Test10Value

我該怎麼做？

我無法通過類進行查詢，因爲所有類都具有相同的名稱。還有其他選擇嗎？

來源

2012-02-01 sam_33

您要使用這個數組？或者...只是以某種方式格式化？ – 2012-02-01 00:21:02

任何一種方式都可以。我只需要從中獲取數據。 – 2012-02-01 00:22:15

對我來說看起來像XML，而不是HTML。 – 2012-02-01 21:45:46

我認爲，在最初的想法，雖然這是未經測試，那下面應該工作：

var values = {}; 

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

JS Fiddle demo，儘管該演示使用真正的標記（一dl，與dt和dd元素）。

來源

2012-02-01 00:22:54

你的意思是'var values = {};'？ – 2012-02-01 00:28:59

是的，我做到了。編輯並更改，謝謝;我想我忘了按下shift鍵。嘆息... =） – 2012-02-01 00:31:25

謝謝它的作品！ – 2012-02-01 04:01:48

你可以使用下面的jQuery來創建一個字符串數組，它的格式是你之後的。現在

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

你可以操縱你喜歡的字符串，如使用.join()創建一個單一的字符串數組。

編輯：.map()函數內部主線的說明：

$(this).text().replace(/^(.*):$/, '$1') + ': ' + $(this).next('bb').text();即

這條線構成在所希望的格式的連接字符串。讓我們打破兩個棘手部件（忽略': '）：

$(this).text().replace(/^(.*):$/, '$1')：這得到在映射回路電流<bt>元件（$(this).text()）的文本內容，然後使用正則表達式在剝去任何:結束。我這樣做是因爲在您的示例HTML中，第一項具有「Test1：」文本，而其他項在末尾沒有冒號。通過這種方式剝離，我確保了一致的輸出（否則，第一個字符串應該是「Test1 :: Test1Value」）。
$(this).next('bb').text()：這只是獲取DOM中當前<bt>之後的下一個元素的文本，該元素是<bb>元素。

讓我知道這是否更有意義。 :-)

來源

2012-02-01 00:26:40 GregL

非常感謝這工作:)你讓我的一天！ – 2012-02-01 00:28:47

沒有probs！有什麼不清楚的嗎？ – GregL 2012-02-01 00:29:43

它的工作原理，但我不明白我們在這裏回來。這是什麼？$（this）.text（）。replace（/^(.*):$/，'$ 1'）+'：'+ $（this）.next（'bb'）。text（） ; – 2012-02-01 00:37:30

你可以這樣說：

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對象（這將是相應的bb對象），然後從中獲取文本並將其分配回結果對象。

如果你想在一個數組的結果與交替BT和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"

來源

2012-02-01 00:29:12 jfriend00

我不知道如果這是正確的方式去關於這個，但...

我傾向於在我的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 ...

來源

2012-02-01 00:41:55 sreyaNotfilc

通過jquery的DOM導航

回答

相關問題