javascript - 将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为“filter-types-*”的所有元素移动到类型数组中(具体来说，li标签)。我不确定解决这个问题的最佳方法。非常感谢任何帮助!

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

Answer 1

如果您愿意使用 jquery，您可以循环遍历 div 中的每个输入(我在其中添加了一个 ID 以使其更容易定位)，并使用 if (或switch 语句(如果您计划添加更多)。

更新

我已更新此内容以反射(reflect)您更新的问题。

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>