通过jquery进行DOM导航

时间:2012-02-01 00:19:28

标签: jquery dom

我是jquery的新手,并且在我的工作中分配了一些工作来完成jquery。我有HTML 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

我该怎么做?

我无法通过类查询,因为所有类都具有相同的名称。还有其他选择吗?

4 个答案:

答案 0 :(得分:2)

我认为,首先想一想,虽然这是未经测试的,但以下情况应该有效:

var values = {};

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

JS Fiddle demo,虽然该演示使用了真实标记(dldtdd元素。

答案 1 :(得分:1)

您可以使用以下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();

此行以所需格式构造连接字符串。让我们分解两个棘手的组件(忽略': '):

  1. $(this).text().replace(/^(.*):$/, '$1'):这会在映射循环中获取当前<bt>元素($(this).text())的文本内容,然后使用正则表达式去除任何: at结束。我这样做是因为在你的示例HTML中,第一个项目的文本为&#34; Test1:&#34;,而其他项目的末尾没有冒号。通过这种方式剥离,我确保了一致的输出(否则,第一个字符串将是&#34; Test1 :: Test1Value&#34;)。
  2. $(this).next('bb').text():这只是获取DOM中当前<bt>之后的下一个元素的文本<bb>元素。
  3. 如果这更有意义,请告诉我。 : - )

答案 2 :(得分:1)

你可以这样做:

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"

这将获取#delme对象中的每个bt,然后从中提取文本,然后获取下一个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"

答案 3 :(得分:0)

我不确定这是否是正确的方法,但......

我倾向于在我的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