How can I set data-slide-to, same as I set id for each .carousel-indicators li
<p>How can I set data-slide-to, same as I set id for each li#myCarousel</p>

<p><strong>HTML</strong></p>

<p>I have set ids 0, 1 ...</p>

<pre><code>&lt;ol class="carousel-indicators"&gt;
&lt;li data-target="#myCarousel" data-slide-to="" id="0"&gt;&lt;/li&gt;
&lt;li data-target="#myCarousel" data-slide-to="" id="1"&gt;&lt;/li&gt;  
&lt;/ol&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>  var iD = document.querySelectorAll('.carousel-indicators li');
  // Set their ID
  for (var i = 0; i &lt; iD.length; i++) 
  iD[i].id = + i;
</code></pre>

<p>I need set also data-slide-to 0, 1 ...</p>

<p><strong>JS</strong></p>

<pre><code>var dataslideto = document.querySelectorAll('.carousel-indicators li');
// Set their data-slide-to
for (var i = 0; i &lt; dataslideto.length; i++)
dataslideto[i].data-slide-to = + i;
</code></pre>

<p><strong>HTML OUTPUT I NEED</strong></p>

<pre><code>&lt;ol class="carousel-indicators"&gt;
&lt;li data-target="#myCarousel" data-slide-to="0" id="0"&gt;&lt;/li&gt;
&lt;li data-target="#myCarousel" data-slide-to="1" id="1"&gt;&lt;/li&gt; 
&lt;/ol&gt;
</code></pre>

<p><strong>* JOB done i have replace js to *</strong></p>

<pre><code>var i = 0;
$(".carousel-indicators li").each( function() {
$(this).attr("data-slide-to", +i);
$(this).attr("id", +i);
i++;
});
</code></pre>