js获取div里的元素个数方法是：先得到父元素，再得到父元素下的某标签类别的子元素，最后统计出子元素的长度就可以简单实现了。
js 动态添加元素(div、li、img等)及设置属性的方法：
一、js 动态添加元素div
<div id="parent"></div>
function addElementDiv(obj) {var parent = documentgetElementById(obj);//添加 divvar div =
documentcreateElement("div");//
设置 div 属性，如 iddivsetAttribute("id", "newDiv");divinnerHTML = "js 动态添
div";parentappendChild(div);}
调用：addElementDiv("parent");
二、js 动态添加li
<ul id="parentUl"><li>原li</li></ul>
function addElementLi(obj) {var ul = documentgetElementById(obj);//添加 livar li =
documentcreateElement("li");//
设置 li 属性，如 idlisetAttribute("id", "newli");liinnerHTML = "js 动态添加li";ulappendChild(li);}
调用：addElementLi("parentUl");
三、js 动态添加元素img
<ul id="parentUl"></ul>
function addElementImg(obj) {var ul = documentgetElementById(obj);//添加 livar li =
documentcreateElement("li");//添加 imgvar img = documentcreateElement("img");//
设置 img 属性，如 idimgsetAttribute("id", "newImg");//设置 img 地址imgsrc =
"/images/prodjpg";
liappendChild(img);ulappendChild(li);}
调用：addElementImg("parentUl");
onload=function(){
var ul = documentgetElementsByTagName("ul")[0];
getLis(ul);
}
var getLis = function(ul){
var ulc = ulchildren;
for(var i = 0; i < ulclength; i++){
var lii = ulc[i];
if(liitagNametoLowerCase() == "li"){
consolelog(lii);
}
var cs = liichildren;
for(var j = 0; j < cslength; j++){
var csj = cs[j];
if(csjtagNametoLowerCase() == "ul"){
getLis(csj);
}
}
}
}
你这个思路就不对，初学者都这样，没什么，我先帮你理一下思路
首先要明白，实现你这个效果，要用JS才可以
你要做的事情是：
1 ，给div里的li添加点击事件并把自己作为参数传递 ,给标记div1里对应的li加个id便于查找，修改html如下,注意加粗的两行
<div class="div">
<ul calss="ul">
<li class="li1" onclick="ok(this);">li1内的文字</>
<li class=li2></>
</ul>
</div>
<div class="div1">
<ul calss="ul">
<li class="li1" id="div1li1"></>
<li class=li2></>
</ul>
</div>
2 使用js处理
<script>
function ok(obj){
//设置obj的样式
具体代码需要根据你的设置来写
//获取对应div1内的li
var newli = documentgetElementById("div1li1");
//设置newli的样式和obj的样式一样
具体代码需要根据你的设置来写
}
</script>
jquery的 length 属性用以获取包含 jQuery 对象中元素的数目：
$("a b li")length; // a类后代b类中包含的li元素的数量综合示例如下：
创建Html元素
<div class="box"><span>点击按钮获取li数量：</span><br>
<div class="content">
<div class="test">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
</div>
<div class="test">
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>Ralph</li>
</ul>
</div>
<div class="test">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
</div>
</div>
<input type="button" value="获取li的数量">
</div>
设置css样式
divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}divbox span{color:#999;font-style:italic;}
divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
ul{padding:5px 25px;border:2px dashed #cc6699;}
编写jquery代码
$(function(){$(":button")click(function() {
tol = $("content test li")length;
num = $("content test ul")map(function() {
return $(this)find("li")length;
})get()join(',');
alert("不同div下的li数量分别为："+num+",总数为："+tol+"。");
});
})
观察效果
是这样的吗？用了一个HTML5的选择器--nth-child（用法的话建议你自己去查下，我说的不是很准确），具体代码如下：
<!DOCTYPE html>
<html lang="en" xmlns=">
<li class="pro_off">
<div class="offers_money"><span>20</span>元</div>
<div class="offers_moneys">满200可用</div>
<div id="offers_id" style="display: none;">12</div>
</li>
<li class="pro_off">
<div class="offers_money"><span>20</span>元</div>
<div class="offers_moneys">满200可用</div>
<div id="Div1" style="display: none;">15</div>
</li>
<li class="pro_off">
<div class="offers_money"><span>20</span>元</div>
<div class="offers_moneys">满200可用</div>
<div id="Div2" style="display: none;">17</div>
</li>
</ul>
</body>
</html>
<script src="TravelCompany/js/jquery-183js"></script>
<script>
//单击第三个li,显示第三个li的17所在的div
$(function () {
//第三个li的点击事件
$("li:nth-child(3)")click(function () {
//显示li后面第三个div
$("#Div2")show();
});
});
</script>
以上就是关于js怎么获取div里的元素个数全部的内容，包括:js怎么获取div里的元素个数、javascript里获取div或ul元素的第一层li或div节点数组再获取第二层li数组再及以下节点如下、div和div1的li怎么弄一样的样式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）