通过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导航

回答

相关问题