動的IDを数え、javascriptを使用してフォーム要素の値を追加します。

Question

私は、HTMLチェックボックスやラジオボタンのようなフォーム要素を持つリストを作成しています。彼らの動的なIDとforの値を対応するLABELタグに与えたいと思います。このすべてがJQuery/JavaScriptを使用します。

私はJavaScriptを

$(document).ready(function() { 
 
    function { 
 
    var count = 0; 
 
    var total = $('.product-menu li').length(); 
 

 
    } 
 
});

.product-menu { 
 
    display: block; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.product-menu li { 
 
    display: list-item; 
 
    line-height: 2; 
 
} 
 
.product-menu label { 
 
    font-weight: normal; 
 
    vertical-align: middle; 
 
    padding-left: 10px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="product-menu"> 
 
    <li> 
 
    <input type="checkbox" id="pm-1"> 
 
    <label for="pm-1">New Arrivals</label> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="pm-2"> 
 
    <label for="pm-2">Accessories</label> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="pm-3"> 
 
    <label for="pm-3">Bags</label> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="pm-4"> 
 
    <label for="pm-4">Jackets</label> 
 
    </li> 
 
</ul>

Answer 1

に良いことはないです。この

$(document).ready(function() { 
 
    $(".product-menu li").each(function(index){ 
 
     var id=$(this).find("input").attr("id"); 
 
     if(id== undefined) 
 
     { 
 
      $(this).find("input").prop("id","pm-"+index); 
 
      $(this).find("label").prop("for","pm-"+index); 
 
     } 
 
     else 
 
     { 
 
      $(this).find("label").prop("for",id); 
 
     } 
 
    }); 
 
});

.product-menu { 
 
    display: block; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.product-menu li { 
 
    display: list-item; 
 
    line-height: 2; 
 
} 
 
.product-menu label { 
 
    font-weight: normal; 
 
    vertical-align: middle; 
 
    padding-left: 10px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="product-menu"> 
 
    <li> 
 
     <input id="test" type="checkbox" > 
 
     <label >New Arrivals</label> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox"> 
 
     <label >Accessories</label> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox"> 
 
     <label>Bags</label> 
 
    </li> 
 
    <li> 
 
     <input id="test2" type="checkbox"> 
 
     <label >Jackets</label> 
 
    </li> 
 
</ul>

のようなものを試してみてください10

Answer 2

以下のコードは、各liのinputとforのラベルにdynamicを追加します。 ここではindexはそれぞれ0で始まります。

$(document).ready(function() { 
     $(".product-menu li").each(function(index){ 
     $(this).find("input").attr("id","pm-"+index); 
     $(this).find("label").attr("for","pm-"+index); 
     }); 
    }); 

Answer 3

はJavaScript：

var list = document.getElementsByClassName("product-menu")[0].children; 
var listLen = list.length; 

for(var i = 0; i<=listLen; i++) { 
    list[i].firstElementChild.id = "pm-"+(i+1); 
    list[i].lastElementChild.setAttribute("for", "pm-"+(i+1)); 
}