Question

是否可以获取没有父元素的元素的索引。子元素通常在被视为父元素的其他“主”元素之间，但子元素不在容器中，我想从“master”元素开始获取索引。

示例：

<table>
    <tbody>
        <tr data-number="0">
            <td>This is a master row 0</td>
        </tr>
        <tr data-parent="0" data-number="01"> <!-- 1 -->
            <td>This is a child row 01</td>
        </tr>
        <tr data-parent="0" data-number="02"> <!-- 2 -->
            <td>This is a child row 02</td>
        </tr>
        <tr data-parent="0" data-number="03"> <!-- 3 -->
            <td>This is a child row 03</td>
        </tr>
        <tr data-number="1">
            <td>This is a master row 1</td>
        </tr>
        <tr data-parent="1" data-number="11"> <!-- 1 -->
            <td>This is a child row 11</td>
        </tr>
        <tr data-parent="1" data-number="12"> <!-- 2 -->
            <td>This is a child row 12</td>
        </tr>
    </tbody>
</table>

让我说我用03的数字来定位行（我使用的是id，所以我不能使用数字），我想得到它的索引。

Answer 1

我假设你的意思是tr相对于它所遵循的“主”tr的索引？

如果是这样，我想你正在寻找prevUntil，它收集前面的兄弟直到与选择器匹配的东西;在您的情况下，匹配的选择器将为tr:not([data-parent])，因为主行没有data-parent属性：

var num = "03";
var index = $("tr[data-number=" + num + "]").prevUntil("tr:not([data-parent])").length;

$("table").on("click", "tr[data-number]", function() {
  alert($(this).prevUntil("tr:not([data-parent])").length);
});

<p>Click a child row in the below to see its index:</p>
<table>
    <tbody>
        <tr data-number="0">
            <td>This is a master row 0</td>
        </tr>
        <tr data-parent="0" data-number="01">
            <td>This is a child row 01</td>
        </tr>
        <tr data-parent="0" data-number="02">
            <td>This is a child row 02</td>
        </tr>
        <tr data-parent="0" data-number="03">
            <td>This is a child row 03</td>
        </tr>
        <tr data-number="1">
            <td>This is a master row 1</td>
        </tr>
        <tr data-parent="1" data-number="11">
            <td>This is a child row 11</td>
        </tr>
        <tr data-parent="1" data-number="12">
            <td>This is a child row 12</td>
        </tr>
    </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

另一种选择是更改标记，以便“主”行在他们自己的tbody中，然后与前一个主人相关的所有“子”行都在他们自己的tbody中。然后你可以使用index：

$("table").on("click", "tr[data-parent]", function() {
  alert($(this).index());
});

<p>Click a child row below to see its index:</p>
<table>
    <tbody>
        <tr data-number="0">
            <td>This is a master row 0</td>
        </tr>
    </tbody>
    <tbody>
        <tr data-parent="0" data-number="01"> <!-- 1 -->
            <td>This is a child row 01</td>
        </tr>
        <tr data-parent="0" data-number="02"> <!-- 2 -->
            <td>This is a child row 02</td>
        </tr>
        <tr data-parent="0" data-number="03"> <!-- 3 -->
            <td>This is a child row 03</td>
        </tr>
    </tbody>
    <tbody>
        <tr data-number="1">
            <td>This is a master row 1</td>
        </tr>
    </tbody>
    <tbody>
        <tr data-parent="1" data-number="11"> <!-- 1 -->
            <td>This is a child row 11</td>
        </tr>
        <tr data-parent="1" data-number="12"> <!-- 2 -->
            <td>This is a child row 12</td>
        </tr>
    </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

$('tr[data-number=03]' ).index()

<强> DEMO

Answer 3

您的意思是http://api.jquery.com/nth-child-selector/

或此http://api.jquery.com/attribute-contains-prefix-selector/

$( "table tr:nth-child(4)" )

$( "tr[data-number|='03']" )

获取两个元素之间的元素索引

3 个答案: