Извлечь кусочки 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 элемента, я бы хотел переместить все элементы с идентификатором «filter-types- *» в массив типов (в частности, тег li). Я не уверен, что лучший способ подойти к этому. Любая помощь очень ценится!

Строка innerHTML равна $(xml).find("filters")[0].innerHTML

Answer 1

Если вы открыты для использования jquery, вы можете перебрать каждый вход в вашем div (к которому я добавил идентификатор, чтобы упростить таргетинг) и вставить в соответствующий массив, используя 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);
}):