jquery怎样获得index

Posted 2023-05-02

*******************html****************************

<div class="disp_layer">
<div class="item left">

</div>
<div class="item">

</div>
</div>
<div class="disp_layer">
<div class="item left">

</div>
<div class="item">

</div>
</div>
**********************************************
JS：
var objs=$('.disp_layer').find('div');
可以获得item的集合，一共四个
比如说点击其中某一个div,我怎样获取我点的是objs里面的第几个？

jquery提供了获得第一个匹配元素相对于其同胞元素的位置的方法——index()，注意：

index从0开始计数

如果未找到元素，index() 将返回 -1。

实例演示如下

创建Html元素

<div class="box">
<span>点击li元素即可获取其index：</span><br>
<div class="content">
    <ul>
  <li>Glen</li>
  <li >Tane</li>
  <li>John</li>
  <li >Ralph</li>
</ul>
</div>
</div>

设置css样式

div.boxwidth:300px;padding:20px;margin:20px;border:4px dashed #ccc;
div.box>spancolor:#999;font-style:italic;
div.contentwidth:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;
limargin:5px;list-style: none;
.redcolor:red !important;

编写jquery代码

$(function() 
$("ul li").click(function() 
$(this).addClass('red');    // 应用样式以突出
n = $(this).index();
alert("被点击的li标签的index顺序为："+n+"，实际顺序为："+(n+1)+"。");  
);
);

观察效果

参考技术A 可以用each函数试试 参考技术B 通过 objs.eq(0)获取第0个 参考技术C 给每个div绑定一个点击事件
objs.bind('click', function()

var root = this; // 记录当前被点击的div

objs.each(function(index)



if(root === this) // 每个div和被点击的div对比是否为同一div，是则输出index



alert(index);

return false;



)

)

在js中怎样获得checkbox里选中的多个值？(jQuery)

思路：利用name属性值获取checkbox对象，然后循环判断checked属性（true表示被选中，false表示未选中）。下面进行实例演示：

1、HTML结构

<input type="checkbox" name="test" value="1"/><span>1</span>
<input type="checkbox" name="test" value="2"/><span>2</span>
<input type="checkbox" name="test" value="3"/><span>3</span>
<input type="checkbox" name="test" value="4"/><span>4</span>
<input type="checkbox" name="test" value="5"/><span>5</span>
<input type=\'button\' value=\'提交\' onclick="show()"/>

2、javascript代码(jQuery)

function show(){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    alert(check_val);
}

3、演示效果