jq获取动态添加元素的个数

小鹏
  • 134

clipboard.png

如图,椭圆圈部分内容是通过jquery ajax从后台拿到的数据动态添加到页面的li 如下图代码,前端怎么才能获取到有多少个li ?求路过前辈指点,谢谢~!

回复
阅读 5k
7 个回答
墨轩
  • 6

获取动态元素可以这样 $("#header_right_imgs_ul").find("li").length
非动态 $("#header_right_imgs_ul li").length

console.log($("#header_right_imgs_ul li").length)
  1. 获取数量的操作要在添加完(load)之后再做
  2. 可以先console下$('#header_right_imgs_ul').children('li'),然后看看这个jQ对象有没有length属性(jQ封装对象提供伪数组特性)
  3. 尽量别在控制台直接用$(),那个是浏览器提供的,并不是jQ
  4. 或者可以$('#header_right_imgs_ul').children('li').toArray(),这样直接返回一个数组也是带length属性的
  5. 还可以从你ajax获取来的数据入手啊,既然能渲染肯定也能拿到数量的,再加上原有的不就得了
  1. 尽量避免操作 DOM,所以你应该先尝试在 Ajax 的阶段获取可能的元素数量
  2. 生成 HTML 的过程可能比较复杂,所以你希望在后面再查找,那么添加完之后 $('li').length (注意这里的选择器要调整)就可以了。
  3. 你只说了想干什么,没有说为什么,我觉得多半你的需求不需要这么做。
OceanZH
  • 283

在AJAX动态生成的li加载完后,通过父元素ul获取下一层的li,再从得到的伪数组里面获取length即可。

var num = $('ul#header_right_imgs_ul > li').length

其实你都用AJAX来动态加载了,直接在AJAX返回了数据里面统计要生成的li数量不就行了吗

你这不搞笑呢吗 异步获取的数据添加到页面 还问有多少个数据,这不是你拿到数据填进去的?

    var li=$("li").length
    console.log(li)
宣传栏