$.each用法及表单联动

最新推荐文章于 2024-02-18 16:30:58 发布

shirukai

最新推荐文章于 2024-02-18 16:30:58 发布

阅读量430

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术

本文链接：https://blog.youkuaiyun.com/shirukai/article/details/80811926

前端技术专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用JQuery的each()方法进行元素、数组及对象的遍历，并展示了具体的HTML和JS代码示例。此外，还提供了一个表单联动的实际应用场景，通过选择不同选项来动态更新下拉列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery 遍历 -each()方法

元素遍历

HTML

<ul>
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="four">4</li>
</ul>

JS

<script type="text/javascript">
    $('li').each(function (index,value) {
        console.log(index,$(value).attr('id'))
    })
</script>

说明：index为选择器的index的位置，value为当前的的元素(也可以使用‘this’选择器)

数组遍历

JS

var testArray = ['one','two','three','four'];
$.each(testArray,function (index,value) {
    console.log(index,value)
})

说明：index为数组的下角标，value为对应的值

对象遍历

JS

var testObject = {
    'one':'这是one',
    'two':'这是two',
    'three':'这是three'
};
$.each(testObject,function (index,value) {
    console.log(index,value)
})

说明 index为对象的key键，value为对象的值

表单联动

HTML

<select id="choseBase">
    <option>请选择</option>
</select>
<select id="choseSource">
    <option>请选择</option>
</select>
<select id="option">
    <option>

JS

var inputObject = {
    'MySQL': {
        '新建MySQL': ['选择mysql父节点', '选择mysql从节点'],
        '已有MySQL': ''
    },
    'ORACLE': {
        '新建oracle': ['选择oracle父节点', '选择oracle从节点'],
        '已有oracle': ''
    }
};
$.each(inputObject, function (key, value) {
    $('#choseBase').append('<option>' + key + '</option>')
});
var checkedBase, checkSource;
$('#choseBase').change(function () {
    $('#choseSource').empty();
    checkedBase = $('#choseBase option:selected').text();
    $('#choseSource').append('<option>请选择</option>');
    $.each(inputObject[checkedBase], function (key, value) {
        $('#choseSource').append('<option>' + key + '</option>')
    })
});
$('#choseSource').change(function () {
    $('#option').empty();
    checkSource = $('#choseSource option:selected').text();
    $('#option').append('<option>请选择</option>');
    $.each(inputObject[checkedBase][checkSource], function (key, value) {
        $('#option').append('<option>' + value + '</option>')
    })
})