siblings获取非当前元素的所有同等级元素

我们都知道，在写js代码的时候，获取各种对象是一个比较让人头疼 的事情，获取某一个指定的元素还比较好说，只要有标示，或者知道他的标签和位置，那都是非常简单的事情，但是，我们的需求往往并没有那么单一，我想获取一个元素的，除了他之外的所有元素该怎么半呢？相信很多经常手写js代码的人或多或少都会遇到类似的问题。那么，接下来，我就给大家介绍一个比较好用的方法：siblings。

w3c上的介绍就不多说了，链接在下，可以自行查看：
http://www.w3school.com.cn/jquery/traversing_siblings.asp

下边，我们就来介绍一下使用的情况（现在以表格为例，其他的以此类推）。

当我点击表格内某一元素的时候，我希望为当前行以外的所有行内，相同元素添加事件。见下图为例，

当我点击一个“产看全部”的时候，自己的显示与隐藏已经实现，但是当我点击多个对象，都会会有多个都是显示状态，如下所示：

很显然，我们并不希望这样的结果，在自己的显示与隐藏正常的情况下，我们希望其他所有的都隐藏掉。解决方法如下：

布局：

<table class="content">
    <thead class="thead">
    <tr>
        <td style="width:68px;">
            <input type="checkbox"/>
            <span>排序</span>
        </td>
        <td style="width:232px;">
            <span>产品名称</span>
        </td>
        <td style="width:83px;">
            <span>所需积分</span>
        </td>
        <td style="width:83px;">
            <span>已兑换</span>
        </td>
        <td style="width:350px;">
            <span>产品详情</span>
        </td>
        <td style="width:180px;">
            <span>管理操作</span>
        </td>
    </tr>
    </thead>
    <tbody class="tbody">
    <tr style="height: 70px">
        <td>
            <input type="checkbox"/>
            <span>1</span>
        </td>
        <td>
            <span>积分兑换（诉讼可行性分析报告）</span>
            <a class="slt" href="#">缩略图
                <img class="img_slt" style="display: none" src="{$Think.const.ADMIN_IMG_CUL}uploadimg.png" alt=""/>
            </a>
        </td>
        <td>
            <span>3000</span>
        </td>
        <td>
            <span>580</span>
        </td>
        <td>
            <span>
                <ul class="list">
                    <li>1.此服务产品为单次服务；</li>
                    <li>2.需审核合同内容权限10页之内；</li>
                    <li>...</li>
                </ul>
                <span class="ckqb">查看全部
                    <ul class="ul_show">
                        <li>1.此服务产品为单次服务；</li>
                        <li>2.需审核合同内容权限10页之内；</li>
                        <li>3.需审核合同内容权限10页之内；</li>
                        <li>4.需审核合同内容权限10页之内；</li>
                        <li>5.需审核合同内容权限10页之内；</li>
                    </ul>
                </span>
            </span>
        </td>
        <td>
            <a href="{:U('Admin/Article/saveArticleCate/',array('article_cate_id' => $item['id']))}"
               class="alter">修改</a>
            <a href="javascript:void(0)" class="del">删除</a>
            <a href="javascript:void(0)" class="sold">下架</a>
        </td>
    </tr>
    <tr style="height: 70px">
        <td>
            <input type="checkbox"/>
            <span>1</span>
        </td>
        <td>
            <span>积分兑换（诉讼可行性分析报告）</span>
            <a class="slt" href="#">缩略图
                <img class="img_slt" style="display: none" src="{$Think.const.ADMIN_IMG_CUL}uploadimg.png" alt=""/>
            </a>
        </td>
        <td>
            <span>3000</span>
        </td>
        <td>
            <span>580</span>
        </td>
        <td>
            <span>
                <ul class="list">
                    <li>1.此服务产品为单次服务；</li>
                    <li>2.需审核合同内容权限10页之内；</li>
                    <li>...</li>
                </ul>
                <span class="ckqb">查看全部
                    <ul class="ul_show">
                        <li>1.此服务产品为单次服务；</li>
                        <li>2.需审核合同内容权限10页之内；</li>
                        <li>3.需审核合同内容权限10页之内；</li>
                        <li>4.需审核合同内容权限10页之内；</li>
                        <li>5.需审核合同内容权限10页之内；</li>
                    </ul>
                </span>
            </span>
        </td>
        <td>
            <a href="{:U('Admin/Article/saveArticleCate/',array('article_cate_id' => $item['id']))}"
               class="alter">修改</a>
            <a href="javascript:void(0)" class="del">删除</a>
            <a href="javascript:void(0)" class="sold">下架</a>
        </td>
    </tr>
    </tbody>
</table>

主要样式

.integral_store .content>tbody>tr>td .ckqb>.ul_show{
    display: none;
}
.integral_store .content>tbody>tr>td .show>.ul_show{
    display: block;
    position: absolute;
    left: -225px;
    top: 150%;
    border: 1px solid #DCDCDC;
    width: 265px;
    background-color: #fff;
    padding: 10px 0 10px 18px;
    box-shadow: 0 0 5px #ddd;
    border-radius: 3px;
    z-index: 1000;
    background-color: #fff;
}
.integral_store .content>tbody>tr>td .show>.ul_show>li{
    color: #999;
    z-index: 1000;
    text-align: left;
}

js实现：

$(".ckqb").click(function(){
    $(this).toggleClass("show");
    console.log($(this));
    $(this).parents("tr").siblings("tr").find(".ckqb").removeClass("show");
})

这样我们就将为题给解决了，需要的朋友试一下吧，如有为题，欢迎指正