遍历表下的每个跨度 > tr > td > div

Question

如何在table > tr > td > div下遍历每个跨度？
我想在单击同一tr级别下的锚标记后隐藏那些span元素。

JSFiddle

$(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遍历div并获取其span详细信息

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();
});

JSFiddleJSFiddle

---

参考文献：

• .closest()
• .find()
• 选择器上下文

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/-删除行中的所有跨度。。。