`

js遍历ul里面的li里面的值

    博客分类:
  • js
阅读更多

不多说,直接上代码

<ul id="ul_damainList">
                		 
             				  
             				  
           				  			<li class="oddli">
           				  				 	
			                        	<span>
			                        		<!-- <input class="licheckbox" type="checkbox" name="dn" id='dn_&#20320;&#22909;.&#24191;&#19996;'/> -->
			                        		<input type="checkbox" name="你好.广东" class="licheckbox">
			                        	</span>
			                            <span>
			                            	<font color="#8c8c8c">
			                            		你好.广东(
			                            	</font>
			                            	<font color="#1fa400">尚未注册</font>
			                            	<font color="#8c8c8c">)
			                            	</font>
			                            	
			                            </span>
			                            <span class="litocart1"><a href="javascript: add2CartAjax('你好.广东')">加入购物车</a></span>
			                        </li>
             				  
             		  	
             				  
             				  
           				  			<li class="oddli">
           				  				 	
			                        	<span>
			                        		<!-- <input class="licheckbox" type="checkbox" name="dn" id='dn_&#20320;&#22909;.&#38598;&#22242;'/> -->
			                        		<input type="checkbox" name="你好.集团" class="licheckbox">
			                        	</span>
			                            <span>
			                            	<font color="#8c8c8c">
			                            		你好.集团(
			                            	</font>
			                            	<font color="#1fa400">尚未注册</font>
			                            	<font color="#8c8c8c">)
			                            	</font>
			                            	
			                            </span>
			                            <span class="litocart1"><a href="javascript: add2CartAjax('你好.集团')">加入购物车</a></span>
			                        </li>
             				  
             		  	
             				  
             				  
           				  			<li class="oddli">
           				  				 	
			                        	<span>
			                        		<!-- <input class="licheckbox" type="checkbox" name="dn" id='dn_&#20320;&#22909;.&#25105;&#29233;&#20320;'/> -->
			                        		<input type="checkbox" name="你好.我爱你" class="licheckbox">
			                        	</span>
			                            <span>
			                            	<font color="#8c8c8c">
			                            		你好.我爱你(
			                            	</font>
			                            	<font color="#1fa400">尚未注册</font>
			                            	<font color="#8c8c8c">)
			                            	</font>
			                            	
			                            </span>
			                            <span class="litocart1"><a href="javascript: add2CartAjax('你好.我爱你')">加入购物车</a></span>
			                        </li>
             				  
             		  	
                	</ul>

 我想拿到 li 里面 的checkbox的值和每个li里面第二个span里面的值,其中第二个span里面的值和checkbox的name相同。

function addToCartAjax(){
		
		//不能加入重复域名
		var liLength = $("#ul_damainList li.oddli").length;
		alert(liLength);
		for(var i = 0; i < liLength; i++){ 
			//var checkBoxElement = $("#ul_damainList li.oddli span:first input")[i]; 
			var inputElement = $("#ul_damainList li.oddli input.licheckbox")[i]; 
			alert(inputElement.checked);
			alert(inputElement.name);
			
        }
	}
	

 注意:如果input的type是hidden的,要用冒号:如,var inputElement = $("#ul_damainList li.oddli input:hidden")[i]

分享到:
评论

相关推荐

    JS遍历ul下的li点击弹出li的索引的实现方法

    我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢???? 接下来看看我们的js代码 var li = document.getElementsByTagName('li'); ...

    ul li ul il结构用js怎么获取最底层的li对象

    在JavaScript中,`ul &gt; li &gt; ul &gt; li`这样的结构代表了一个嵌套的无序列表,其中`ul`是无序列表元素,`li`是列表项元素。这种结构常见于构建多级目录或者层级菜单。当我们需要获取最底层的`li`对象时,可以采用递归...

    Jquery和JS获取ul中li标签的实现方法

    如果想要获取每个ul下的最后一个li元素,可以使用`.each()`方法来遍历ul元素,并获取每个ul下的最后一个子元素: ```javascript $(function() { $("ul").each(function(){ var y = $(this).children().last(); ...

    javascript操作ul中li的方法

    在示例中,使用`var li = lis[i]`来存储当前遍历到的`li`元素,以避免在事件处理函数中`i`值因循环结束而改变。 - 在事件处理函数中使用`var ul = document.getElementById("football")`来重新获取`ul`元素,确保...

    遍历json显示树形菜单

    在IT领域,尤其是在前端开发中,经常需要处理JSON(JavaScript Object Notation)数据,并将其以树形结构展示出来,这通常用于构建导航菜单、组织层级数据等。"遍历json显示树形菜单"是一个常见的需求,涉及到的主要...

    浅析vue中常见循环遍历指令的使用 v-for

    vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码: &lt;body&gt; &lt;ul&gt; &lt;li v-for=value&gt;{{value}}&lt;/li&gt; ...

    jQuery在ul中显示某个li索引号的方法

    在Web开发中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。在处理列表(ul元素)和列表项(li元素)时,有时候我们需要在列表项上显示它们的索引号。这种方法在...

    JavaScript使用ul中li标签实现删除效果

    在这个函数中,使用了for循环遍历所有的li元素。如果某个li元素的className属性为“hover”,则说明它应该是被删除的元素,于是使用其父节点的“removeChild”方法将其从DOM中移除。值得注意的是,在移除元素后,...

    JavaScript获取ul中li个数的方法

    获取页面中特定元素的个数是常见的需求,比如获取一个无序列表(ul)中所有的列表项(li)个数。下面将详细介绍如何使用JavaScript来获取无序列表中列表项的个数,并涉及相关的一些基础知识和技巧。 首先,基本的...

    js循环给li绑定事件实现 点击li弹出其索引值 和内容的方法

    本文将详细介绍如何使用原生 JavaScript 和 jQuery 来实现点击 `li` 元素时弹出该元素的索引值及其内容的功能。 #### 方法一:原生 JavaScript 首先,我们通过 `document.getElementsByTagName` 获取所有的 `li` ...

    Vue.js做select下拉列表的实例(ul-li标签仿select标签)

    在本文中,我们将探讨如何使用Vue.js来实现一个模拟`select`下拉列表的效果,具体是通过`ul`和`li`标签来实现。这个实例展示了Vue.js在组件化、数据绑定以及事件处理方面的强大功能。 首先,Vue.js组件是构建用户...

    jQuery循环遍历子节点并获取值的方法

    本篇文章将详细讲解如何使用jQuery来循环遍历子节点并获取它们的值,这在处理复杂页面结构时尤其有用。 首先,我们来看一个简单的HTML示例,包含一个`&lt;div&gt;`元素,其中嵌套了多个`&lt;ul&gt;`列表和`&lt;li&gt;`列表项: ```...

    CSS结合JavaScript 实现Li隔行换色 代码

    ### CSS结合JavaScript 实现Li隔行换色代码详解 #### 一、背景介绍 在网页设计与开发过程中,为了提高用户体验以及美观性,开发者经常需要对列表项进行样式处理,如实现列表项的隔行变色功能。这种功能不仅能够使...

    JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

    在给出的示例中,JQuery被用来实现在一个无序列表(ul元素)中动态添加和删除列表项(li元素)的功能。以下是利用JQuery实现这些功能的详细知识点: 1. 引入JQuery库:在文档的部分通过标签引入了JQuery的库文件。...

    javascript动态修改Li节点值的方法.docx

    ### JavaScript 动态修改 Li 节点值的方法 #### 概述 在Web开发中,经常需要通过JavaScript来动态地操作DOM元素,比如修改列表项(`&lt;li&gt;`元素)的内容。这种需求常见于交互式的网站应用中,例如允许用户编辑页面上...

    jQuery动态删除CSS UL LI中的一个列表项.rar

    本文将详细讲解如何使用jQuery动态删除CSS中的`UL`和`LI`列表项,以及如何实现列表的自动对齐,从而营造出删除列表项的视觉效果。 首先,`UL`和`LI`是HTML中用于创建无序列表的元素。在CSS中,可以通过选择器来定义...

    jQuery如何取网页中li的值.zip

    这会遍历所有`&lt;ul&gt;`下的`&lt;li&gt;`元素,并打印出它们的文本内容。 3. **`.text()`和`.html()`**:获取`&lt;li&gt;`的值通常是指获取其文本内容。`.text()`用于获取元素的纯文本内容,不包括HTML标签。`.html()`则返回元素的...

Global site tag (gtag.js) - Google Analytics