Question

如何遍历table > tr > td > div下的每个范围？
一旦点击同一span级别下的锚标记，我想隐藏这些tr元素。

$(document).ready(function() {
    $(".hide").click(function(){
        $('#table td div span').each(function(){
            var $span = $(this);
            $(this).siblings().hide();
            var spanattr = $span.attr('class');
            alert(spanattr);
        });
    });
});

HTML：

<table id="table">
    <tbody>
        <tr>
            <td class="tdspan">
                <div class="container">
                    <span class="spanelem">First</span>
                </div>
            </td>
            <td class="tdspan">
                <div class="container">
                    <span class="spanelem">Second</span>
                </div>
            </td>
            <td class="tdspan">
                <div class="container">
                    <span class="spanelem">3rd</span>
                </div>
            </td>
            <td>
                <a href="#" class="hide">Hide</a> 
            </td>
        </tr>
    </tbody>
    <br>
</table>
<span id="text"></span>

我已经搜索了其他问题并使用了提供的解决方案，例如下面的链接，但我无法弄清楚。

jquery to traverse the div and get its span details

Answer 1

你不需要循环。
只需.find()在所点击元素的最近.spanelem父级中与班级<tr>划分：

$(".hide").click(function(){
    $(this).closest('tr').find('.spanelem').hide();
    // Or using selector context (.find() equivalent but a bit shorter)
    // $('.spanelem', $(this).closest('tr')).hide();
});

~~JSFiddle~~ JSFiddle

参考文献：

Answer 2

你只是试图隐藏跨度吗？你隐藏了他们的兄弟姐妹，因为他们是他们父母div的唯一孩子，所以没有别的东西要隐藏。如果你想隐藏跨度，那就改变

$(this).siblings().hide();

到

$(this).hide();

如果您有多行，那么您可以从点击到其祖先行的.hide按钮爬上树，然后查找该行中的所有跨度。您可能希望搜索特定的类或所有跨度，但我不确定您如何识别要隐藏的元素。

像

这样的东西

$(this).closest('tr').find('span').each(function() {

在此处更新了JSFiddle：https://jsfiddle.net/fk9jgrLx/4/

Answer 3

如果您的表结构与提供的示例相同，并且您将有多行：

$(document).ready(function() {
    $(".hide").click(function(){
        $(this).parent().siblings().find('span').hide();
    });
});

https://jsfiddle.net/L1j9psz6/1/ - 从行中删除所有跨度...

遍历表格下的每个跨度＆gt; tr> td＆gt; DIV

3 个答案: