Question

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

我该怎么做？

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

Answer 1

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

var values = {};

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

JS Fiddle demo，虽然该演示使用了真实标记（dl，dt和dd元素。

Answer 2

您可以使用以下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()）的文本内容，然后使用正则表达式去除任何: at结束。我这样做是因为在你的示例HTML中，第一个项目的文本为＆＃34; Test1：＆＃34;，而其他项目的末尾没有冒号。通过这种方式剥离，我确保了一致的输出（否则，第一个字符串将是＆＃34; Test1 :: Test1Value＆＃34;）。
$(this).next('bb').text()：这只是获取DOM中当前<bt>之后的下一个元素的文本<bb>元素。

如果这更有意义，请告诉我。： - ）

Answer 3

你可以这样做：

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"

Answer 4

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

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

通过jquery进行DOM导航

4 个答案: