jq 如何根据id逐个赋值? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

jq 如何根据id逐个赋值?

2016-06-12 15:19:28 1698 1

自己写了个页面想要模拟多选框 大部分实现了 差了一点样式上的小效果
由于label想要把宽度撑起来的前提是外面的li标签的宽度必须大于等于label的宽度,我就想获取到label的宽度按照id赋予给对于的li标签上 失败了 考虑不出症结在哪 求解

html处的代码

        <li class="Check-box clearfix">
            <ul>
                <li class="checkbox-li title"><span>专&nbsp;&nbsp;&nbsp;业:</span></li>
                <li class="checkbox-li bb">可多选</li>            
                <li class="checkbox-li checkboxOne" id="input-01">
                    <input type="checkbox" value="1" id="checkboxOneInput-01" name="" />
                    <label for="checkboxOneInput-01" class="check-label" id="t-01">创新实验班</label>
                </li>
                 <li class="checkbox-li checkboxOne" id="input-02" >
                    <input type="checkbox" value="2" id="checkboxOneInput-02" name="" />
                    <label for="checkboxOneInput-02" class="check-label" id="t-02">创新班</label>
                </li>

            </ul>
        </li>

下面是jq代码

   $(document).ready(function(){
        $('.check-label').each(function(){
            var clid = $(this).attr('id');
            var wclid = $("#"+clid).innerWidth();
            var ww = $("#inpu" + clid );
            ww.width(wclid);
        });
    });
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:34:10

    按你的思路,你的脚本是没错的,不过有几个地方需要优化一下

    $(document).ready(function() {
        $('.check-label').each(function() {
            var label = $(this);
            var clid = $(this).attr('id');
            // 当前 label 已经取到了,不用再用 $() 根据 ID 的封装的效率略低
            var wclid = label.innerWidth();
            // 这里 t-xx 和 input-xx 的关系很明确,就是直接的包含关系
            // 所以可以用 parnet() 来获取外层节点,不需要用 $() 来获取
            // var ww = $("#inpu" + clid);
            var ww = label.parent();
            ww.width(wclid);
        });
    });

    倒是改改样式表可能会达到你的效果

    li {
        display: inline-block;
    }

    screenshot

    0 0
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载