リストに反復して最も近い値を取得

Question

以下のリストをループして、入力としてのクラスとしての値を設定するにはどうすればよいですか？しかし、.liBrandリスト項目を反復することはできません。

<ul> 
    <li class="liModelFilter liMultipleSelectionFilter"> 
     <ul> 
      <li class="liBrand"><b>Mini</b></li> 
      <li> 
       <input type="checkbox" value="1090" id="ModelIds"> 
       <span>Cooper</span> 
      </li> 
      <li> 
       <input type="checkbox" value="1092" id="ModelIds"> 
       <span>One</span> 
      </li> 
     </ul> 
    </li> 
</ul> 

必要な結果：

<li> 
    <input class="Cooper" type="checkbox" value="1090" id="ModelIds"> 
    <span>Cooper</span> 
</li> 

私はカスタムのチェックボックスを作成する必要があるため、私はこれを必要とする - 各チェックボックスは、タイプ（クーパー、ワン、...）のロゴを持っている必要があります。

は、私はすでにこのような何かを試してみました：

jQuery($('.liModelFilter ul li:not(.liBrand)')).each(function() { 
    console.log($('.liModelFilter ul li:not(.liBrand)')).html(); 
}); 

Answer 1

のようなもの、input要素にaddClass()を呼び出し、そして兄弟spanのテキストの内容を返す関数を提供することで、これを行うための最も簡単な方法この：

$('.liModelFilter :checkbox').addClass(function() { 
 
    return $(this).next('span').text(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="liModelFilter liMultipleSelectionFilter"> 
 
    <ul> 
 
     <li class="liBrand"><b>Mini</b></li> 
 
     <li> 
 
     <input type="checkbox" value="1090" class="ModelIds"> 
 
     <span>Cooper</span> 
 
     </li> 
 
     <li> 
 
     <input type="checkbox" value="1092" class="ModelIds"> 
 
     <span>One</span> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

id="ModelIds"をクラスに変更しました.DOM内にidの属性を重複させることはできません。