将innerHTML片段提取到分组中

Question

我有一串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＆＃34; filter-types - *＆＃34;的元素。到类型数组（特别是li标签）。我不确定解决这个问题的最佳方法。非常感谢任何帮助！

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

Answer 1

如果你打开使用jquery，你可以循环div中的每个输入（我已经添加了一个ID以便更容易定位）并使用if（或者a）推送到适当的数组如果您打算添加更多，请切换语句。

更新

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

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>

Answer 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);
}):