【问题标题】：Extract Pieces of innerHTML into Groupings将部分 innerHTML 提取到分组中
【发布时间】：2018-10-07 08:26:48
【问题描述】：

我有一个 html 字符串，我正在尝试提取不同的片段并分组。例如：

<div xmlns="http://www.w3.org/1999/xhtml" class="filters-container">
<div class="search-filter" id="search-filter-type"><span class="filter-option-title">Car Type</span>
    <ul>
        <li>
            <input id="filter-types-all" name="filter-types-all" type="checkbox" checked="checked" />
            <label id="filter-types-all" for="filter-types-all"><span class="filter-label" title="All Car Types">All Car Types</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-1" value="ECAR,CCAR,CDAR,EDAR" />
            <label for="filter-types-1"><span class="filter-label" title="Small Cars">Small Cars</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-2" value="ICAR,SCAR,ICAH,IDAR" />
            <label for="filter-types-2"><span class="filter-label" title="Medium Cars">Medium Cars</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-3" value="FCAR,PCAR,FDAR" />
            <label for="filter-types-3"><span class="filter-label" title="Large Cars">Large Cars</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-4" value="IFAR,SFAR,CFAR,FFAR,RFAR,PFAR" />
            <label for="filter-types-4"><span class="filter-label" title="SUVs &amp; Crossovers">SUVs &amp; Crossovers</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-5" value="MVAR,RVAR,FVAR" />
            <label for="filter-types-5"><span class="filter-label" title="Vans">Vans</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-6" value="LCAR,LDAR" />
            <label for="filter-types-6"><span class="filter-label" title="Luxury">Luxury</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-7" value="STAR" />
            <label for="filter-types-7"><span class="filter-label" title="Convertibles">Convertibles</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-8" value="SSAR" />
            <label for="filter-types-8"><span class="filter-label" title="Sports">Sports</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-9" value="ICAH" />
            <label for="filter-types-9"><span class="filter-label" title="Hybrids">Hybrids</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-10" value="SKAR" />
            <label for="filter-types-10"><span class="filter-label" title="Commercial">Commercial</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-11" value="XXAR" />
            <label for="filter-types-11"><span class="filter-label" title="Specialty">Specialty</span></label>
        </li>
    </ul>
</div>
<div class="search-filter" id="search-filter-payment-type"><span class="filter-option-title">Payment Type</span>
    <ul>
        <li>
            <input type="checkbox" id="filter-pay-now" value="Y" checked="checked" />
            <label for="filter-pay-now"><span class="filter-label" title="Pay Now"><span class="label">Pay Now</span></span>
            </label>
        </li>
        <li>
            <input type="checkbox" id="filter-pay-later" value="N" checked="checked" />
            <label for="filter-pay-later"><span class="filter-label" title="Pay at Pick-up"><span class="label">Pay at Pick-up</span></span>
            </label>
        </li>
    </ul>
</div>

查看元素的 innerHTML 时，我想将所有 id 为“filter-types-*”的元素移动到类型数组中（特别是 li 标记）。我不确定解决这个问题的最佳方法。非常感谢任何帮助！

innerHTML 字符串是$(xml).find("filters")[0].innerHTML

【问题讨论】：

一种解决方案是使用 jQuery 选择所有具有“type”类的元素，然后遍历这些元素并将文本推送到数组变量名称 typeArray 或类似名称。
如果这是 HTML 则无效。 input 元素没有结束标签，也没有文本。他们有一个value 属性。
@AndrewLohr 如果字符串位于 $(xml).find("filters")[0].innerHTML ...选择所有具有“type”类的元素的语法是什么？
@Michael 是您在问题中发布的 HTML，是 $(xml).find("filters")[0].innerHTML 的结果？
这是一项与一分钟前截然不同的任务。

标签： javascript jquery arrays xml sorting

【解决方案1】：

如果您愿意使用 jquery，您可以遍历 div 中的每个输入（我已在其中添加了一个 ID 以便于定位）并使用 if（或如果您打算添加更多 switch 语句）。

更新

我已更新此内容以反映您更新后的问题。

var types = [];

var html = $(".search-filter").find("li");

$.each(html, function(){
  var inputs = $(this).find("input");
  
  $.each(inputs, function(){
 		if($(this).prop("id").indexOf("filter-types") >= 0){
      types.push($(this).parents("li"));
    } 
  })
})

console.log("Types");
console.log(types);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="search-filter" id="search-filter-type"><span class="filter-option-title">Car Type</span>
    <ul>
        <li>
            <input id="filter-types-all" name="filter-types-all" type="checkbox" checked="checked" />
            <label id="filter-types-all" for="filter-types-all"><span class="filter-label" title="All Car Types">All Car Types</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-1" value="ECAR,CCAR,CDAR,EDAR" />
            <label for="filter-types-1"><span class="filter-label" title="Small Cars">Small Cars</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-2" value="ICAR,SCAR,ICAH,IDAR" />
            <label for="filter-types-2"><span class="filter-label" title="Medium Cars">Medium Cars</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-3" value="FCAR,PCAR,FDAR" />
            <label for="filter-types-3"><span class="filter-label" title="Large Cars">Large Cars</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-4" value="IFAR,SFAR,CFAR,FFAR,RFAR,PFAR" />
            <label for="filter-types-4"><span class="filter-label" title="SUVs &amp; Crossovers">SUVs &amp; Crossovers</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-5" value="MVAR,RVAR,FVAR" />
            <label for="filter-types-5"><span class="filter-label" title="Vans">Vans</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-6" value="LCAR,LDAR" />
            <label for="filter-types-6"><span class="filter-label" title="Luxury">Luxury</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-7" value="STAR" />
            <label for="filter-types-7"><span class="filter-label" title="Convertibles">Convertibles</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-8" value="SSAR" />
            <label for="filter-types-8"><span class="filter-label" title="Sports">Sports</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-9" value="ICAH" />
            <label for="filter-types-9"><span class="filter-label" title="Hybrids">Hybrids</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-10" value="SKAR" />
            <label for="filter-types-10"><span class="filter-label" title="Commercial">Commercial</span></label>
        </li>
        <li>
            <input type="checkbox" id="filter-types-11" value="XXAR" />
            <label for="filter-types-11"><span class="filter-label" title="Specialty">Specialty</span></label>
        </li>
    </ul>
</div>
<div class="search-filter" id="search-filter-payment-type"><span class="filter-option-title">Payment Type</span>
    <ul>
        <li>
            <input type="checkbox" id="filter-pay-now" value="Y" checked="checked" />
            <label for="filter-pay-now"><span class="filter-label" title="Pay Now"><span class="label">Pay Now</span></span>
            </label>
        </li>
        <li>
            <input type="checkbox" id="filter-pay-later" value="N" checked="checked" />
            <label for="filter-pay-later"><span class="filter-label" title="Pay at Pick-up"><span class="label">Pay at Pick-up</span></span>
            </label>
        </li>
    </ul>
</div>

【讨论】：

更新为现在添加父 li 而不是输入。另请注意，您可以通过将.find('input') 添加到初始选择器来避免双重循环。
再次更新，现在考虑search-filters 中的所有输入 - 您可以添加额外的 if 语句和数组来对其余部分进行分组。

【解决方案2】：

使用 JQuery：

//Grab each element with class = "type", iterate them and push into array:
$('.type').each(function(){
    typeArray.push(this);
});

//Grab each element with class = "location", iterate them and push into array:
$('.location').each(function(){
    locationArray.push(this);
}):

【讨论】：