1. El uso de cada método ()

JQuery proporciona cada método () para recorrer la información del elemento coincidente. Ejecute una función con cada elemento coincidente como contexto. Cada vez que se ejecuta la función pasada, la palabra clave this en la función apunta a un elemento DOM diferente (un elemento coincidente diferente cada vez). Además, cada vez que se ejecuta la función, se pasa a la función como parámetro un valor numérico (un entero de base cero) que representa la posición del elemento del entorno de ejecución en el conjunto de elementos coincidentes. Devolver 'falso' detendrá el ciclo (como usar 'romper' en un ciclo normal). Regrese 'verdadero' para saltar al siguiente ciclo (como usar 'continuar' en un ciclo normal).

La sintaxis de uso es la siguiente:

//使用each()方法，遍历选中的复选框值
$("[name=checkItem]:checkbox:checked").each(function(index){
    alert($(this).val());
});

[Ejemplo] Utilice el método each () de JQuery para recorrer el valor de la casilla de verificación seleccionada.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery中的each()方法的使用</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
    <h3>请选择用户信息：</h3>
    <input type="checkbox" name="checkItem" value="1"/> pan_junbiao的博客_01<br>
    <input type="checkbox" name="checkItem" value="2"/> pan_junbiao的博客_02<br>
    <input type="checkbox" name="checkItem" value="3"/> pan_junbiao的博客_03<br>
    <input type="checkbox" name="checkItem" value="4"/> pan_junbiao的博客_04<br>
    <input type="checkbox" name="checkItem" value="5"/> pan_junbiao的博客_05<p>
    <input type="button" value="提交" id="btnSubmit"/>
</body>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function(){
        //提交
        $("#btnSubmit").click(function()
        {
            //用户编号数组
            var idArray = new Array();

            //使用each()方法，遍历选中的用户编号
            $("[name=checkItem]:checkbox:checked").each(function(index){
                idArray.push($(this).val());
            });

            //打印结果
            console.log("您选择共：" + idArray.length + "条数据！")
            console.log(idArray);
        });
    });
</script>
</html>

Resultados del:

Cuando se hace clic en el botón enviar, la salida de información del controlador es la siguiente:

2. El uso de la función $ .each ()

JQuery también proporciona un método de recorrido general $ .each (), que se puede usar para atravesar objetos y matrices. La función $ .each () es diferente del método each () del objeto JQuery. Es una función global y no manipula el objeto JQuery. En su lugar, toma una matriz u objeto como primer parámetro y una función de devolución de llamada como el segundo parámetro. Hay dos parámetros en la función de devolución de llamada: el primer parámetro es el índice del miembro o matriz del objeto y el segundo parámetro es la variable o contenido correspondiente. Si necesita salir del bucle $ .each (), la función de devolución de llamada puede devolver falso y se ignorarán otros valores devueltos.

La sintaxis de uso es la siguiente:

//使用$.each()函数，遍历数据
$.each(data,function(index,item)
{
    //忽略其他代码...
});

[Ejemplo] Llame al método en segundo plano para obtener la lista de usuarios y utilice la función $ .each () de JQuery para recorrer la lista de usuarios.

(1) Cree un controlador de información de usuario (controlador) y escriba un método para obtener la lista de usuarios.

/**
 * 用户信息控制器
 * @author pan_junbiao
 **/
@Controller
@RequestMapping("user")
public class UserController
{
    /**
     * 获取用户列表
     */
    @ResponseBody
    @RequestMapping("getUserList")
    public List<UserInfo> getUserList()
    {
        //创建用户列表
        List<UserInfo> userInfoList = new ArrayList<>();
        userInfoList.add(new UserInfo(1, "pan_junbiao的博客", "您好，欢迎访问 pan_junbiao的博客"));
        userInfoList.add(new UserInfo(2, "pan_junbiao的博客", "https://blog.csdn.net/pan_junbiao"));
        userInfoList.add(new UserInfo(3, "pan_junbiao的博客", "您好，欢迎访问 pan_junbiao的博客"));
        userInfoList.add(new UserInfo(4, "pan_junbiao的博客", "https://blog.csdn.net/pan_junbiao"));
        userInfoList.add(new UserInfo(5, "pan_junbiao的博客", "您好，欢迎访问 pan_junbiao的博客"));
        //返回结果
        return userInfoList;
    }
}

(2) Cree una página de visualización (Ver) para mostrar la información de la lista de usuarios.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery中的$.each()函数的使用</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
<input type="button" value="获取用户信息" id="btnGetUser"/>
<div id="content" style="margin-top: 10px;"></div>
</body>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("#btnGetUser").click(function(){
            $.getJSON("/user/getUserList", function(data){
                $("#content").empty();

                var html = "";

                //使用$.each()函数，遍历数据
                $.each(data,function(index,item)
                {
                    html += " 索引：" + index;
                    html += " 用户编号：" + item.userId;
                    html += " 用户名称：" + item.userName;
                    html += " 博客信息：" + item.remark;
                    html += "<br>";
                });

                $("#content").html(html);
            });
        });
    });
</script>
</html>

Resultados del:

El uso de cada método () y función $ .each () en JQuery

1. El uso de cada método ()

2. El uso de la función $ .each ()

Supongo que te gusta