用于响应式引导 css 的 jQuery 选择器答案

【问题标题】：jQuery selector for responsive bootstrap css用于响应式引导 css 的 jQuery 选择器
【发布时间】：2016-04-13 03:31:11
【问题描述】：

我正在使用引导程序来获得响应式 UI。正常查看页面时，我有一个带有按钮的表格。当我按下按钮时，我需要选择最近的 tr 与 role="row"。我设法做到了这一点：

var selectedRow = $(this).closest('tr[role="row"]');

当页面进入响应模式时，我的表格会获得额外的 tr 元素。如何选择第一个父级，即 tr 与 role="row" 以便选择器在这两种情况下都有效。

普通页面：

        <tbody>
        <tr role="row" class="odd parent">
            <td tabindex="0"></td>
            <td>Name1</td>
            <td class="sorting_1">Event1</td>
            <td>Something1</td>
            <td>YES</td>
            <td>
                <button class="editDetail"><span class="glyphicon glyphicon-pencil text-primary"></span></button></td>
        </tr>
        <tr role="row" class="odd parent">
            <td tabindex="1"></td>
            <td>Name2</td>
            <td class="sorting_1">Event2</td>
            <td>Something2</td>
            <td>YES</td>
            <td>
                <button class="editDetail"><span class="glyphicon glyphicon-pencil text-primary"></span></button></td>
        </tr>
    </tbody>

响应式页面

        <tbody>
        <tr role="row" class="odd parent">
            <td tabindex="0"></td>
            <td>Name1</td>
            <td class="sorting_1">Event1</td>
            <td>Something1</td>

        </tr>
        <tr class="child">
            <td class="child" colspan="6">
            <ul data-dtr-index="0">
                <li data-dtr-index="4">
                    <span class="dtr-data">YES</span>
                </li>
                <li data-dtr-index="5">
                    <span class="dtr-title"></span> 
                    <span class="dtr-data">
                    <button class="editDetail"><span class="glyphicon glyphicon-pencil text-primary"></span></button>
                    </span>
                </li>
            </ul>
            </td>
        </tr>
        <tr role="row" class="odd parent">
            <td tabindex="0"></td>
            <td>Name2</td>
            <td class="sorting_1">Event2</td>
            <td>Something2</td>

        </tr>
        <tr class="child">
            <td class="child" colspan="6">
            <ul data-dtr-index="0">
                <li data-dtr-index="4">
                    <span class="dtr-data">YES</span>
                </li>
                <li data-dtr-index="5">
                    <span class="dtr-title"></span> 
                    <span class="dtr-data">
                    <button class="editDetail"><span class="glyphicon glyphicon-pencil text-primary"></span></button>
                    </span>
                </li>
            </ul>
            </td>
        </tr>
    </tbody>

【问题讨论】：

您的具体要求是什么？您想从最近/最近的具有“行”角色的 tr 获取数据，还是从触发按钮单击事件的当前 tr 获取数据？
我需要来自最近的具有“行”角色的 tr（响应式案例中的前第二个元素）的数据

标签： jquery html twitter-bootstrap jquery-selectors

【解决方案1】：

根据您提供的内容，尝试替换：

var selectedRow = $(this).closest('tr[role="row"]');

通过这个：

var selectedRow = $(this).parents('tr[role="row"]');

【讨论】：

您好，感谢您的回复，不幸的是，我在响应模式下遇到错误。注意有两个按钮，一个是隐藏的，另一个是显示在新的元素中。这就是我在点击时开始的级别，由于某种原因，我无法选择带有目标标签的顶部 tr 元素。编辑：现在才意识到我不需要父元素，而是需要角色 =“row” 的前一个 tr 元素
您能否提供一个 JSFIddle 中的场景？提供帮助会容易得多:)