Anwenden eines CSS-Stils auf ein zugeordnetes Objekt

Question

Ich habe eine Liste von Elementen, die Kontrollkästchen für eine Einstellungsseite sind. Diese werden in einem const items wie so gespeichert:

const ITEMS = [ 
    ["youtube", "YouTube"], 
    ["videos", "Videos"], 
    ["facebook", "Facebook"], 
    ["settings", "Settings"], 
] 

und zur Zeit, diese vier Elemente sind nur als Listenelemente aufgeführt. Was ich jetzt habe, ist dies:

aber, was ich will, ist dies:

Ich dachte an einen Scheck Anwendung zu sehen, ob die Unterkategorie zu, dass gehört Übergeordnete Kategorie und wenden Sie eine Art von Einzug auf die Unterkategorien an. Ist das möglich über eine map (wie ich durch dieses Array iterieren)? Oder gibt es einen klügeren und effizienteren Weg, dieses Problem zu lösen?

Hier ist, wie ich meine Kontrollkästchen machen:

item: function(i) { 
    return (
     <div className="checkbox"> 
      <label> 
       <input type="checkbox" checked={this.state.items[i[0]]}/> 
       {i[1]} 
      </label> 
     </div> 
    ) 
} 

render: function() { 
    return (
     <div className="col-sm-12"> 
      {_(ITEMS).map(this.item, this)} 
     </div> 
    ) 
} 

Answer 1

Ich würde Ihnen empfehlen, zu verwenden, Objekte in einem Array. So können Sie jedem Objekt mehr als nur eine Eigenschaft zuweisen. Für den Zugriff nur mit normalem Javascript würde ich einen for -Loop wegen seiner Kompatibilität mit älteren Browsern verwenden. Ein Beispiel, das ich gemacht, sind hier zu finden:

https://jsfiddle.net/morrisjdev/vjb0qukb/

Answer 2

Mit etwas 'schmutzigen' Code, könnten Sie verwenden: https://jsfiddle.net/1sw1uhan/

const ITEMS = [ 
 
    ["youtube", "YouTube"], 
 
    ["videos", "Videos"], 
 
    ["facebook", "Facebook"], 
 
    ["settings", "Settings"], 
 
] 
 

 
var list = $('<ul>'); 
 
$.each(ITEMS, function(index, value) { 
 
\t if ((index+1)%2 == 0 && index != 0){ 
 
\t \t var sublist = $('<ul>').append($('<li>').text(value[1]).attr('id', value[0])); 
 
\t } else { 
 
\t \t var sublist = $('<li>').text(value[1]).attr('id', value[0]); 
 
\t } 
 
\t list.append(sublist); 
 
}) 
 
$('#somediv').append(list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="somediv"> 
 

 
</div>