Как бы я превратил каждый класс, возвращенный в массив - PullRequest
Новая
       7

Как бы я превратил каждый класс, возвращенный в массив

1 голос
/ 16 января 2020

У меня есть код ниже, который возвращает каждую строку на сайте. Каждая строка содержит до 8 строк адреса. Я хочу иметь возможность превращать каждую строку каждого адреса, для каждого адреса в массив.

Я новичок с JavaScript, поэтому любая помощь будет принята с благодарностью:) 

<div class="classname" row="0" style="top:0px">
  <div class="row1" title> Address 1 </div>
  <div class="row2" title> Address 2 </div>
  <div class="row3" title> Address 3 </div>
  <div class="row4" title> Address 4 </div>
  <div class="row5" title> Address 5 </div>
  <div class="row6" title> Postcode </div>
  <div class="row7" title> Phone </div>
  <div class="row8" title> Email </div>
</div>
<div class="classname" row="1" style="top:0px">
  <div class="row1" title> Address 1 </div>
  <div class="row2" title> Address 2 </div>
  <div class="row3" title> Address 3 </div>
  <div class="row4" title> Address 4 </div>
  <div class="row5" title> Address 5 </div>
  <div class="row6" title> Postcode </div>
  <div class="row7" title> Phone </div>
  <div class="row8" title> Email </div>
</div>

for (var i = 0; i < Address.length; i++) {
  var AddAlert = Address[i].innerText;
  alert(AddAlert);
}

Ответы [ 2 ]

2 голосов
/ 16 января 2020

Вы должны поиграться с DOM API:

  1. document.querySelectorAll
  2. element.querySelectorAll

Или библиотека JQuery.

Однако здесь объясняется решение DOM ... 

// Select all <div> having a 'row' attribute - i.e <div row=...>
// And since we call this on document, it matches for the whole html page
const rowNodes = document.querySelectorAll('div[row]');

const addresses = [];

for (let rowNode of rowNodes) {
    // Select all <div> having a class attribute with value of 'row1' or 'row2' or 'row3'...
    // And since we call this on rowNode, it matches ONLY for its descendants
    let addresseNodes = rowNode.querySelectorAll('div[class^="row"]');

    let rowAddresses = [];

    for (let addressNode of addresseNodes) {
        // You may want .innerText instead
        rowAddresses.push(addressNode.innerHTML);
    }

    addresses.push(rowAddresses);
}

// return addresses;
0 голосов
/ 16 января 2020

Вы можете попробовать с querySelectorAll()

Метод Document querySelectorAll() возвращает stati c (не живой) NodeList, представляющий список элементов документа, соответствующих указанной группе селекторов.

и Array.prototype.map ()

* Метод 1019 * создает новый массив, заполненный результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

Попробуйте выполнить следующий способ: 

var listP = document.querySelectorAll('.classname');
var res = Array.from(listP).map(function(el){
  return Array.from(el.querySelectorAll('[class^=row]')).map(i => i.innerText.trim());
});
console.log(res);
<div class="classname" row="0" style="top:0px">
  <div class="row1" title> Address 1 </div>
  <div class="row2" title> Address 2 </div>
  <div class="row3" title> Address 3 </div>
  <div class="row4" title> Address 4 </div>
  <div class="row5" title> Address 5 </div>
  <div class="row6" title> Postcode </div>
  <div class="row7" title> Phone </div>
  <div class="row8" title> Email </div>
</div>
<div class="classname1" row="0" style="top:0px">
  <div class="row1" title> Address 1 </div>
  <div class="row2" title> Address 2 </div>
  <div class="row3" title> Address 3 </div>
  <div class="row4" title> Address 4 </div>
  <div class="row5" title> Address 5 </div>
  <div class="row6" title> Postcode </div>
  <div class="row7" title> Phone </div>
  <div class="row8" title> Email </div>
</div>
...