Question

我有这样的HTML：

<div class="foo">
    <div class="bar1">A</div>
    <div class="bar2">B</div>
    <div class="bar3">C</div> 
</div>
<div class="foo">
    <div class="bar1">D</div>
    <div class="bar2">E</div>
    <div class="bar3">F</div> 
</div>
<div class="foo">
   ...etc.

我正在尝试遍历"foo" div以创建类似这样的代码的对象，例如{bar1: A, bar2: B, bar3: C}：

var arrayOfObjects= [];
var rows = $(".foo");

for (var i=0; i<rows.length; i++) {
    var row = rows[i];

    arrayOfObjects.push(
        { 
            bar1: row.find(".bar1").text(),
            bar2: row.find(".bar2").text(),
            bar3: row.find(".bar3").text()
        }
    );
}

我知道这是行不通的，因为原始的var rows = $(".foo");创建了一个没有find()作为函数的DOM元素数组。我也知道在循环中，我可以开始使用elementByClass和innerHtml，但是每当我开始在同一代码中混合使用jQuery样式选择器和DOM样式选择器时，我都会感到哭泣。 / p>

有没有办法在上面修复我的代码，以便在循环中使用jQuery选择器？

Answer 1

您可以使用.row轻松遍历each() div，

 var arrayOfObjects= [];   
 $(".foo").each(function(){
      var items = {"bar1" : $(this).find('.bar1').text(),"bar2" : $(this).find('.bar2').text(), "bar3" : $(this).find('.bar3').text()};    
      arrayOfObjects.push(items); //If you want to push all into an object and then into an array

      //or to use it on its own
      $(this).find('.bar1').text();
      $(this).find('.bar2').text();
      $(this).find('.bar3').text();
 });

希望这会有所帮助。

Answer 2

您可以将元素包装为jQuery对象，如下所示：

arrayOfObjects.push(
    { 
        bar1: $(row).find(".bar1").text(),
        bar2: $(row).find(".bar2").text(),
        bar3: $(row).find(".bar3").text()
    }
);

这使您行行一个具有'find'方法的JQuery对象。

Answer 3

             //find all the foo, and map them into new elements
var result = $('.foo').map(function(index, element){
  //we want to map all the children of the element into a single object
  return $(element).children().get().reduce(function(aggregate, childElement){
    //get the class off of the child and it's value, put them in the object
    aggregate[childElement.className] = childElement.innerText;
    
    return aggregate;
  }, {}); //second argument to the reduce() is the starting element
}).get(); //use get() to break the array out of the jQuery object

console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
    <div class="bar1">A</div>
    <div class="bar2">B</div>
    <div class="bar3">C</div> 
</div>
<div class="foo">
    <div class="bar1">D</div>
    <div class="bar2">E</div>
    <div class="bar3">F</div> 
</div>

Answer 4

$(document).ready(() => {
  var arrayOfObjects = $('.foo').map(function() {
    return $(this).find('>*').map(function(obj) {
      return {
        class: $(this).attr('class'),
        text: $(this).text()
      };
    }).get().reduce( (obj, arr) => {
      obj[arr.class] = arr.text;
      return obj;
    }, {});
  }).get();
  
  console.log(arrayOfObjects);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
    <div class="bar1">A</div>
    <div class="bar2">B</div>
    <div class="bar3">C</div> 
</div>
<div class="foo">
    <div class="bar1">D</div>
    <div class="bar2">E</div>
    <div class="bar3">F</div> 
</div>

希望这对您有帮助：）

Answer 5

使用.each遵循这些原则可能会起作用

const $rows = $('.foo');
let arrayOfObjects = [];

$rows.each(function(i) {
  const $row = $(this);
  let obj = {};
  $row.children().each(function(ch) {
    obj = { ...obj, [this.className]: $(this).text() };
  });
  arrayOfObjects = [ ...arrayOfObjects, obj ];
});

console.log(arrayOfObjects);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
    <div class="bar1">A</div>
    <div class="bar2">B</div>
    <div class="bar3">C</div> 
</div>
<div class="foo">
    <div class="bar1">D</div>
    <div class="bar2">E</div>
    <div class="bar3">F</div> 
</div>

jQuery遍历另一个元素中的元素

5 个答案: