jq遍历元素

太过爱你忘了你带给我的痛 2024-04-17 06:15 97阅读 0赞

#### jq遍历元素 ####

通过jq遍历元素、并控制一些元素的属性（显示/隐藏、value、src等等），是我们在开发之中比较常见的操作，也为我们的业务功能扩宽了方向，接下来我将结合近段时间在工作上的际遇粗略介绍一下一些稍稍复杂的jq遍历。

#### 案例一 ####

###### 需求背景： ######

通过获取被点击元素，并以此为基准，遍历该元素的其他元素，控制其他元素的一些属性。

###### 功能需求： ######

通过获取被点击的元素a标签，给该元素设置背景颜色，并恢复其他同级元素的初始属性：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70]  
如上图：点击四个tab元素之中一个，将本次被点击的a的背景设为如图颜色，并将其他三个a的背景颜色修改为图中样子.

###### 具体功能需求描述： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70 1]

###### 操作步骤： ######

现在假设我已经点击了第一个tab标签，并且已经做出了该有的相应（背景颜色已经变了，collapse相应内容已经展开了），那么当我**点击第二个tab标签后，我要实现第二个tab背景颜色变为第一个tab的背景颜色，并且第一个恢复如初**，如何实现呢？  
具体实现的代码如下：

$("#myTab li a").click(
    			function() {
        
    				//给被点击的a设置背景
    				$(this).css("background-color", "#EEEEEE");
    				//移除向前被点击的a的样式：获取父亲节点的兄弟节点的子节点
    				$(this).parent().siblings().children("a").css("background-color", "");
    			}
    	});

###### 代码解释： ######

第一行代码：  
**获取被点击的a元素，并且设置改元素的css样式：background-color为：\#EEEEEE**  
第二行代码：  
**以当前获取的元素为基准，去寻找该元素的父亲元素的兄弟元素的儿子元素（即去寻找该元素的堂兄弟元素），并去掉这些元素的背景颜色**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70 3]

#### 案例二 ####

这个案例和上一个案例的功能需求也是差不多的，只不过是有一点点小小的不同，详细的我就不一一列出来了，我只来解释一些代码。

###### 效果图： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70 4]

###### 代码： ######

// 控制tab的颜色、字体、iframe的src等等，第一个参数为tab的id，第二个参数为iframe的父亲div的id
    		function changeEvent(tab_id,iframe_id) {
        
    			console.log(tab_id);
    			$(tab_id).children('a').css("background-color", "#4b8df8");//设置当前元素背景颜色为被点击状态
    			$(tab_id).siblings('.toRight_li').children('img').attr('src', temp_img);//改变往后箭头结点的图片
    
    			// 往后遍历同级元素：.nextAll
    			$(tab_id).nextAll().addClass('disabled');
    			$(tab_id).nextAll().children('a').addClass('disabled').attr('href', '1');
    
    			$(iframe_id).children('iframe').attr('src',$(iframe_id).children('iframe').data("src"));//设置iframe的src
    
    			$(iframe_id).removeClass('collapse').addClass('in');//展开对应 iframe
    
    			// 向前检索
    			$(tab_id).prevAll().each(function () {
        
    				$(this).children("a").css("background-color", "#4b8df8");
    				$(this).children("img").attr('src','${(img_path) }/toRight.png');
    				$(this).children("img").css({
        "height":"15px" ,"margin-top":"12px","margin-left":"7px","width":"90px"});
    			});
    			$(iframe_id).prevAll().each(function () {
        
    				var  src_obj = $(this).children('iframe').data("src");
    				console.log(src_obj);
    				$(this).children('iframe').attr('src',src_obj);
    			});
    			$(iframe_id).siblings('div').each(function () {
        
    				$(this).removeClass('in').addClass('collapse');//关闭其他iframe
    			})
    		}

###### 代码：$(tab\_id).nextAll().children(‘a’).addClass(‘disabled’).attr(‘href’, ‘1’);  的作用： ######

向后遍历同级元素的子元素a，并设置类‘disabled’、设置href属性为1

###### 代码：$(tab\_id).prevAll().each(function () \{ \}); 的作用： ######

向前遍历同级元素

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/39e60408dec6418a96d5b1250a2a071e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/562050c9f2ea4ab1960ff8868d57985b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/6ab5e9165d8749edbb3ddd278fd7bc5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/32f02f5652644afe90bdc853cae75ee3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/ba17e8d71823487f9e9e7d231e6efdb4.png