实时搜索: js获取当前li是第几个

js获取当前li是第几个

414条评论 3141人喜欢 3258次阅读 975人点赞
例如 313 变为 <li>3</li><li>1</li><li>3</li> , <ul>
<li class="1">这个要添加class</li>
<li class="2">这个要添加class</li>
<li class="3">这个要添加class</li>
<li class="1">这个要添加class</li>
<li class="2">...

JS 每个字符前后添加: <script>
var s="321";
var v=s.replace(/(.)/g,"<li>$1</li>");
alert(v);
</script>

li中用foreach遍历出来的值 用JS怎么获得: <!-- 大概的做法如下 -->
<ul id='list'>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<script type="text/javascript">
    //  JS的方式
    window.onload = function() {
        var ulStr = "";
        var li = document.getElementById("list").getElementsByTag("li");
        if(li != null) {
            for(var i = 0, j = li.length; i < j; i++) {
                ulStr += li[i].innerText + "\n";
            }
        }
        alert("JS获取ul的值如下:" + ulStr);
    }
    // jq 的方式
    $(documennt).ready(function() {
        var ulStr = "";
        $("#list li").each(function(i, obj) {
            ulStr += $(obj).text() + "\n";
        });
        alert("JQ获取ul的值如下:" + ulStr);
    });
</script>

寻找一个js方法给li循环添加class,具体请看下方,谢谢大神:
window.onload = function(){
    var lis = document.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
        lis[i].className = String(i).length > 1 ? i : "0" + i;
    }
}
 
jquery:
 
jQuery(function($){
    $("li").each(function(i, domEle){
        $(this).addClass(String(i).length > 1 ? i : "0" + i);
    });
});

求js代码:默认如下图打开第一个li下面的div,希望鼠标经过每一个li就加载一个class=current(代表li下面的: function list_Tab(a) {
    a.each(function(b) {
        $(this).bind("mouseover", function() {
            var e = this;
            var d = $(e);
            a.removeClass("current");
            d.addClass("current");
        });
    });
}

给那个页面代码扣出来看看

a是所有li集合 对每一个li 绑定鼠标悬浮事件 

每次悬浮事件触发时 先将所有li的current移除

再只对当前li 添加 current

js怎么获得li的value?: document.getElementById("a").getAttribute("value");//结果为1
document.getElementById("a").innerHTML;//结果为A
你ID是一样的,用getElementById会默认是为第一个li的结果。
document.getElementsByName("a");这就是一个集合了,可以通过使用小标分别获取
document.getElementsByName("a")[0].getAttribute("value");//结果为1
document.getElementsByName("a")[1].getAttribute("value");//结果为2

js动态添加与删除ul中的li:

1、使用jquery脚本库,因此先引入jquery脚本文件。

2、html代码里,就是一个ul列表,里面有二个img控件,还有一个按钮。要注意的是给ul加了一个样式名。

3、使用jquery,先为按钮添加一个点击事件。

4、在点击事件函数里,我们直接使用js代码就能获取到img控件了,var imgs = $(".jy_ul li img");

这就是使用jquery的方便,ul列表的样式名,然后按层次 li img的控件名,就能获取到图片控件了。

5、用alert输入图片的src属性来验证获取到的数据是否准确。因为有两个图片控件,所以代码里获取到的是一个数组,我们输出第二个图片的src。

6、运行页面,可以看到有二个图片和一个按钮,点击按钮。

7、点击后弹出了第二张图片的src属性,对比代码,数据正确。

JS效果:3个不同颜色的li不断循环,怎么做?: <meta charset="utf-8" />
如果出现乱码请把utf-8设置为gbk<br />
<style type="text/css">
/*先定义三个颜色类*/
.ys1{background-color:#f00;}
.ys2{background-color:#0f0;}
.ys3{background-color:#00f;}
</style>
ok颜色样式有了
<br />
来,做个输入框<br />
这位仁兄,你要打印多少
<input type="text" id="n" value="10" />
<input type="button" value="开始打印" onclick="print()" />
<br />
给编辑框加id(我设置为n),方便等会取数量
<br />
给按钮加上事件,被单击调用print()
<br />
接下来我们开始写print()
<br />
。。等会忘了,在加个标签(id=rs)用来显示结果
<br />
<ol id="rs"></ol>
<script type="text/javascript">
function print(){
//创建一个print()
//1.取出打印数量赋值给变量$n
var $n=document.getElementById("n").value;
//好,提示一把看看有没有成功
alert("哥,你想打印"+$n+"个li,没事,一定要是整数哦!还有别输几万,免得你机器顶不住");

//来,创建样式类名数组用来作为等会给li赋值类名
var $style=["ys1","ys2","ys3"];//就是我们刚刚定义的样式
var $z=0;//初始化为0,让他指向数组第一个元素
//在定义一个变量存放结果
var $rs="";//初始化为空
//要让他循环$n次
for(var $i=0;$i<$n;$i++){
if($z==$style.length){
//判断指针是否指到外面去了。。。这里一定要好好理解
$z=0;
}
$rs+='<li class="'+$style[$z]+'">';
$rs+="这是第"+($i+1)+"个li,这个时候这个li的累名为"+$style[$z]+"</li>";
$z++;//自身加1
}
//好循环完成,结果在$rs中
document.getElementById("rs").innerHTML=$rs;

}
</script>

关于JS 遍历 ul li问题: $('#a').find('li').each(function(){
$(this).click(function(){
alert($(this).index())
})
})
别忘了引入jquery

再发一个纯js版本的
<div id="a">
<ul>
<li>111111111</li>
<li>2222222222</li>
<li>33333333</li>
<li>4444444</li>
<li>55555555</li>
<li>66666666</li>
</ul>
</div>

<script>
var cNode =document.getElementById('a').getElementsByTagName('li');

for( var i=0; i<cNode.length; i++){
cNode[i].index= i;
cNode[i].onclick = function(){
alert( "this index of cNode is : " + this.index);
}
}
</script>

  • 12生肖哪个动物是最有威信的

    金山ocr识别工具干什么用的: 你好,是用来识别图片上的文字的,可以将图片文字转换成Word文档,我用过的,觉得捷速ocr,再识别率上比较不错,操作上来讲也相对简单。 ...

    860条评论 1328人喜欢 3977次阅读 534人点赞
  • 五常属于哪个市

    我初三,偏科非常严重,语数能过百,英语满分120,我撑死40,还有几个月中考,我有救吗?: 加油,千万不要放弃!我也是今年中考!你应该买最简单的英语练习册来刷,把基础知识先巩固好,再逐步增大难度。背好单词,把老师上课讲的东西学透学扎实,平时多看点跟英语有关的东西,相信你可以的!加油! ...

    622条评论 3802人喜欢 1017次阅读 841人点赞
  • pp助手刷机多久

    热血江湖师徒系统详细介绍: 10级拜师15级第一个任务作用是提高师傅传授的武功威力。25级第二个任务作用是师徒两人共同增加5%的攻击力 生命力+20(镰刀)45级第三个任务作用是师徒两人共同增加5%的防御力 生命力+20(木龙牌)65级第四个任...

    290条评论 1512人喜欢 6554次阅读 755人点赞
  • 昆明 哪里 小吃

    如何在单片机中用OCR软件识别文字: CAJviewer就有这个功能,在工具菜单下面有个文字识别选项,这个就是ocr了,我经常用。 ...

    894条评论 5153人喜欢 5980次阅读 764人点赞
  • mate9与mate9pro哪个好

    OCR什么意思?: OCR(Optical Character Recognition,光学字符识别),是属于图型识别(Pattern Recognition,PR)的一门学问。其目的就是要让计算机知道它到底看到了什么,尤其是文字资料。...

    644条评论 2759人喜欢 1499次阅读 793人点赞
  • 昆山几个万达广场

    成都三五三一商贸有限公司怎么样?: 成都三五三一商贸有限公司是2014-08-25在四川省成都市彭州市注册成立的有限责任公司(自然人独资),注册地址位于彭州市致和镇护贤南路139号23栋1-5层1号。成都三五三一商贸有限公司的统一社会信用代码/注册号是...

    576条评论 1831人喜欢 6518次阅读 961人点赞