jQuery - 对于另一个类中的每个类

Question

目标：从类option1,2和3获取每个对象的每个值或者是否可以将$（this）与each（）函数一起使用以仅引用其中的类已选择的对象？

编辑/注意：我的实际代码动态创建/添加div标签

示例HTML：

<div class="object">
    <div class="object-title">Object Title 2</div>
    <div class="added">
        <div class="option1">some value</div>
        <div class="option1">some value</div>
        <div class="option1">some value</div>
        <div class="option2">some value</div>
        <div class="option3">some value</div>
        <div class="option3">some value</div>
    </div>
</div>

<div class="object">
    <div class="object-title">Object Title 2</div>
    <div class="added">
        <div class="option2">some value</div>
        <div class="option2">some value</div>
        <div class="option2">some value</div>
        <div class="option1">some value</div>
        <div class="option3">some value</div>
        <div class="option3">some value</div>
    </div>
</div>

示例jQuery：

$('.object').each(function(i, obj){
    var object = {}
    object['title'] = $(this).find('.object-title').html();

    //Get each value for option 1 for this object: 

    //Get each value for option 2 for this object:

    //Get each value for option 3 for this object:

});

Answer 1

您可以尝试这样的事情：

var object = [];
$('.object').each(function(i, obj){
    object[i] = {};
    object[i]['title'] = $(obj).find('.object-title').html();
    for(j = 1; j < 4; j++) {
        var options = [];
        $(obj).find('.option' + j).each(function(i, obj){
            options[i] = $(obj).html();
        });
        object[i]['option' + j] = options;
    }
});
console.log(object);

Answer 2

您可以创建一个值数组，如

$('.object').each(function(i, obj) {
  var object = {}
  object['title'] = $(this).find('.object-title').html();

  $(this).find('.added > div').each(function() {
    var array = object[this.className];
    if (!array) {
      object[this.className] = array = [];
    }
    array.push($(this).html())
  })

  snippet.log(JSON.stringify(object));
  console.log(object)
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="object">
  <div class="object-title">Object Title 2</div>
  <div class="added">
    <div class="option1">some value1</div>
    <div class="option1">some value</div>
    <div class="option1">some value</div>
    <div class="option2">some value2</div>
    <div class="option3">some value</div>
    <div class="option3">some value3</div>
  </div>
</div>

<div class="object">
  <div class="object-title">Object Title 2</div>
  <div class="added">
    <div class="option2">some value</div>
    <div class="option2">some value</div>
    <div class="option2">some value</div>
    <div class="option1">some value</div>
    <div class="option3">some value</div>
    <div class="option3">some value</div>
  </div>
</div>

Answer 3

我相信jQuery var object = $('.object').map(function(i,v) { var obj = new Object(); obj.title = $('.object-title', v).text(); obj.option1 = $('.added .option1', v).map(function() { return this.textContent; }).get().join(','); obj.option2 = $('.added .option2', v).map(function() { return this.textContent; }).get().join(','); obj.option3 = $('.added .option3', v).map(function() { return this.textContent; }).get().join(','); return obj; }).get(); console.log( JSON.stringify( object ) ); /* OUTPUT: [{ "title": "Object Title 2", "option1": "some value,some value,some value", "option2": "some value", "option3": "some value,some value" }, { "title": "Object Title 2", "option1": "some value", "option2": "some value,some value,some value", "option3": "some value,some value" }] */方法是这样的操作之王：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="object">
    <div class="object-title">Object Title 2</div>
    <div class="added">
        <div class="option1">some value</div>
        <div class="option1">some value</div>
        <div class="option1">some value</div>
        <div class="option2">some value</div>
        <div class="option3">some value</div>
        <div class="option3">some value</div>
    </div>
</div>

<div class="object">
    <div class="object-title">Object Title 2</div>
    <div class="added">
        <div class="option2">some value</div>
        <div class="option2">some value</div>
        <div class="option2">some value</div>
        <div class="option1">some value</div>
        <div class="option3">some value</div>
        <div class="option3">some value</div>
    </div>
</div>

onCreate