DOM навигация через jquery

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

Вы можете сделать это так:

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"

Answer 3

Вы можете использовать следующий 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();

Эта строка создает объединенную строку вжелаемый формат.Давайте разберем два хитрых компонента (игнорируя ': '):

1. $(this).text().replace(/^(.*):$/, '$1'): получит текстовое содержимое текущего элемента <bt> ($(this).text()) в цикле отображения,а затем использует регулярное выражение для удаления любого : в конце.Я сделал это, потому что в вашем примере HTML первый элемент содержал текст «Test1:», в то время как остальные не имели двоеточие в конце.Удалив его таким образом, я обеспечил согласованный вывод (в противном случае первой строкой была бы «Test1 :: Test1Value»).
2. $(this).next('bb').text(): это просто возвращает текст следующего элемента после текущего <bt> в DOM, который является <bb> элементом.

Дайте мне знать, если это имеет больше смысла.: -)

Answer 4

Я не уверен, что это правильный путь, но ...

Я склонен использовать несколько классов в моих div.То есть я создаю класс для группировки элемента, а затем другой класс для идентификации единственного элемента.Вы также можете просто дать ему идентификатор.

Нет ограничений на количество классов, которые вы можете создать.Я использую классы повсеместно в качестве идентификаторов.Есть ли другие способы сделать это?Я уверен, но этот способ работает просто отлично.

На самом деле, я, вероятно, пишу это немного по-другому.

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