admin管理员组

文章数量:1026380

I am creating a list which has some form elements like html checkbox or radio-buttons. I want to give them dynamic ID and for values to its corresponding LABEL tag. All this but using JQuery/JavaScript.

I am not that good in 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=".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>

I am creating a list which has some form elements like html checkbox or radio-buttons. I want to give them dynamic ID and for values to its corresponding LABEL tag. All this but using JQuery/JavaScript.

I am not that good in 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./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>

  • javascript
  • jquery
  • html
Share Improve this question asked Mar 22, 2016 at 14:18 Deepak YadavDeepak Yadav 7,0995 gold badges33 silver badges51 bronze badges 3
  • 1 How are you creating/generating list? If it's dynamically, why not implementing it on back-end? Or is it hard coded? – Bozidar Sikanjic Commented Mar 22, 2016 at 14:32
  • It is hard-coded ! Actually, i'm learning Javascript. So needed to know, how to do it using JavaScript/JQuery – Deepak Yadav Commented Mar 23, 2016 at 4:23
  • If you're still learning, I strongly advise you to learn pure JS, and than start with jQuery. – Bozidar Sikanjic Commented Mar 23, 2016 at 9:41
Add a ment  | 

3 Answers 3

Reset to default 3

Try something like this

$(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./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>

Below code will add dynamic into input and for into label in each li. Here index starts with 0 in each.

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

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));
}

I am creating a list which has some form elements like html checkbox or radio-buttons. I want to give them dynamic ID and for values to its corresponding LABEL tag. All this but using JQuery/JavaScript.

I am not that good in 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=".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>

I am creating a list which has some form elements like html checkbox or radio-buttons. I want to give them dynamic ID and for values to its corresponding LABEL tag. All this but using JQuery/JavaScript.

I am not that good in 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./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>

  • javascript
  • jquery
  • html
Share Improve this question asked Mar 22, 2016 at 14:18 Deepak YadavDeepak Yadav 7,0995 gold badges33 silver badges51 bronze badges 3
  • 1 How are you creating/generating list? If it's dynamically, why not implementing it on back-end? Or is it hard coded? – Bozidar Sikanjic Commented Mar 22, 2016 at 14:32
  • It is hard-coded ! Actually, i'm learning Javascript. So needed to know, how to do it using JavaScript/JQuery – Deepak Yadav Commented Mar 23, 2016 at 4:23
  • If you're still learning, I strongly advise you to learn pure JS, and than start with jQuery. – Bozidar Sikanjic Commented Mar 23, 2016 at 9:41
Add a ment  | 

3 Answers 3

Reset to default 3

Try something like this

$(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./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>

Below code will add dynamic into input and for into label in each li. Here index starts with 0 in each.

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

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));
}

本文标签： jqueryCount and add Dynamic ID and for values for form elements using javascriptStack Overflow

版权声明：本文标题：jquery - Count and add Dynamic ID and for values for form elements using javascript - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745642532a2160832.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。