jQuery 用法


jQuery 用法

遍历

Jquery中遍历使用$.each()方法。

有五种方法：

  • 循环一个数组（foreach循环）
  • 循环一个对象数组
  • 循环JSON数据
  • 循环html元素
  • 通过表格行 tr 获得 td 值

循环数组

var myArray = ["apple", "mango", "orange", "grapes", "banana"];

$.each(myArray, function (index, value) {
  console.log(index+' : '+value);
});

显示索引和值。

循环对象数组

var obj= [
  { FirstName: "Andrea" , LastName:"Ely", Gender:"F"},
  { FirstName: "John" , LastName:"Shaw", Gender:"M"},
  { FirstName: "Leslie" , LastName:"Mac", Gender:"F"},
  { FirstName: "David" , LastName:"Millr", Gender:"M"},
  { FirstName: "Rehana" , LastName:"Rewa", Gender:"F"}
]

$.each(obj, function (index, value) {
  var first_name=value.FirstName;
  var last_name=value.LastName;
  console.log(first_name+" "+last_name);
});

显示了对象数组里的FirstName和LastName。

循环遍历一个列举元素

<ul id="ul_Items">
  <li class='fruits' >Apple</li>
  <li class='fruits' >Mango</li>
  <li class='automobile' >Honda Accord</li>
  <li class='automobile' >Harley Davidson</li>
  <li class='fruits' >Oranges</li>
  <li class='fruits' >Grapes</li>
  <li class='automobile' >Royal Enfield</li>
</ul>

$("#ul_Items li").each(function(){
  var self=$(this);
  console.log(self.text());
});

$.each($("#ul_Items li"),function(){
  var self=$(this);
  console.log(self.text());
});

显示所有 li 标签的文本。

过滤实现：

$("#ul_Items li").each(function(){
  var self=$(this);
  //这将检查li是否有类fruits然后才会显示
  if(self.hasClass("fruits")) 
  {
    console.log(self.text());
  }else 
  {
    // other code logic
  }
});

$("#ul_Items li.fruits").each(function(){
  var self=$(this);
  console.log(self.text());
});

循环遍历一个表格行

<table id="myTable" style="margin-left:50px;">
  <tr><th>Sr no</th><th>Name</th><th>Gender</th><th>Location</th></tr>
  <tr><td> 1</td><td>Satinder Singh</td><td> M </td><td> India </td></tr>
  <tr><td> 2 </td><td>Amit Sarna</td><td> M </td><td> France </td></tr>
  <tr><td> 3 </td><td>Andrea Ely</td><td> F </td><td> Brazil </td></tr>
  <tr><td> 4 </td><td>Leslie Mac </td><td> F </td><td> Australia </td></tr>
  <tr><td> 5 </td><td>Sonya David </td><td> F </td><td>America</td></tr>
</table>


$(".button").on('click', function () {
  $("#myTable tr").each(function () {
    var self = $(this);
    var col_1_value = self.find("td:eq(0)").text().trim();
    var col_2_value = self.find("td:eq(1)").text().trim();
    var col_3_value = self.find("td:eq(2)").text().trim();
    var col_4_value = self.find("td:eq(3)").text().trim();
    var result = col_1_value + " - " + col_2_value + " - " + col_3_value + " - " + col_4_value;
    console.log(result);
  });
});

曾经碰到一个问题，怎么获取里面input的值：

<div class="col-xs-12 col-sm-8">
    <dl class="fieldlist" data-name="shop[contacter_list]" id="shop_contacter_list" data-listidx="0">
        <dd>
            <ins>姓名</ins>
            <ins>手机号</ins>
        </dd>
        <dd class="form-inline" fieldlist-item="true">
            <input type="text" name="shop[contacter_list][0][key]" class="form-control" value="张三" size="10">
            <input type="text" name="shop[contacter_list][0][value]" class="form-control" value="18403030004">
        </dd>
        <dd class="form-inline" fieldlist-item="true">
            <input type="text" name="shop[contacter_list][1][key]" class="form-control" value="李四" size="10"> 
            <input type="text" name="shop[contacter_list][1][value]" class="form-control" value="18403030006"> 
        </dd>
    </dl>
</div>

这里花了好长时间，最后通过上面的示例，找到了解决办法：

var shop_contacter_list = [];
var contacter_name = null;
var contacter_phone = null;
var contacter_arr = null;

$('#shop_contacter_list .form-inline').each(function(index, element){
    var self = $(this);
    contacter_name = self.find('input:eq(0)').val().trim();
    contacter_phone = self.find('input:eq(1)').val().trim();
    if (contacter_name != '' && contacter_phone != '') {
        contacter_arr = [contacter_name, contacter_phone];
        shop_contacter_list.push(contacter_arr);
    }
});






参考资料

jQuery $.each() 方法的5种使用方式 http://www.webkaka.com/tutorial/js/2019/032134/

返回