私はこのHTMLを持っている子要素

Question

に基づいてグループ化し、配列を作成します。

<select id="this_id"> 
<option value="0" class="empty-item">Choose Type</option> 
<optgroup label="FirstGrouping"></optgroup> 
<option value="2">Thing1</option> 
<optgroup label="SecondGrouping"></optgroup> 
<option value="8">Thing4</option> 
<option value="4">Thing3</option> 
<optgroup label="ThirdGrouping"></optgroup> 
<option value="7">Thing8</option> 
<option value="5">Thing9</option> 
</select> 

私がやろうとしています何をすると、このようになります。配列を作成することです：

"data": [{ 
    "Label": "FirstGrouping", 
    "Options": ["Thing1"] 
}, { 
    "Label": "SecondGrouping", 
    "Options": ["Thing4", "Thing3"] 
}, { 
    "Label": "ThirdGrouping", 
    "Options": ["Thing8", "Thing9"] 
}] 

なしあり与えられた順序はoptgroupとoptionです。だから基本的には最初のオブジェクトoptgroupとそれに続くoptionsの要素をグループdataの配列の中にグループ化する必要があります。 "Label"がoptgroupおよび"Options"である場合、次のoptgroup要素の前のすべての要素は、optionです。 data内の第2のオブジェクトは、"Label"および"Options"として次のoptgroupを有し、以下のoptionの要素は、optgroup要素の前にあります。等々。 optgroupがoption要素をラップしたい場合

、その後、私のような何かを行うことができます：

var yearz = []; 
var yearz2 = $('#this_id'); 
yearz2.each(function() { 
    var thelabel = $(this).attr('label'); 
    var lengthch = $(this).children().length; 
    var thisch = $(this).children(); 
    var theobj = []; 
    var alls = []; 
    for (var i = 0; i < lengthch; i++) { 
     alls.push({ 
      "Value": thisch.eq(i).val(), 
      "Text": thisch.eq(i).text() 
     }); 
    } 
    theobj = { 
     Label: thelabel.trim(), 
     Options: alls 
    }; 

    yearz.push(theobj); 
}); 

をしかしoption要素を'optgroup'ラップしません。 これを行うには巧妙な方法はありますか？ よろしく

Answer 1

あなたはこのES5コードを使用することができます。

var data = []; 
 
var elems = document.getElementById('this_id').children; 
 
for (var i=0; i<elems.length; i++) { 
 
    var el = elems[i]; 
 
    if (el.tagName === 'OPTGROUP') { 
 
     data.push({ label: el.getAttribute('label'), options: []}); 
 
    } else if(el.tagName === 'OPTION' && data.length) { 
 
     data[data.length-1].options.push(el.textContent); 
 
    } 
 
} 
 
console.log(data);

<select id="this_id"> 
 
<optgroup label="FirstGrouping"></optgroup> 
 
<option value="2" style="text-indent: 10px;">Thing1</option> 
 
<optgroup label="SecondGrouping"></optgroup> 
 
<option value="8" style="text-indent: 10px;">Thing4</option> 
 
<option value="4" style="text-indent: 10px;">Thing3</option> 
 
<optgroup label="ThirdGrouping"></optgroup> 
 
<option value="7" style="text-indent: 10px;">Thing8</option> 
 
<option value="5" style="text-indent: 10px;">Thing9</option> 
 
</select>