javascript - jquery newb，难以理解选择器和索引-6ren

javascript - jquery newb，难以理解选择器和索引

转载作者：行者123 更新时间：2023-11-28 00:13:12

25

4

我在理解选择器和索引在 JQuery 中的工作方式时遇到一些问题。我希望编写一些基于类属性操作 html 元素的函数，我意识到当我尝试使用 index() 方法或 prevAll().length 来获取元素在一组元素中的位置时，我并不总能得到预期的结果。

下面，我有一段 jquery 代码，它对 .element_list 类的所有内容执行某些操作，然后在该代码中对 .element_list_item 类的所有内容执行操作。我有两个 .element_lists，A 和 B，所有这一切都是提醒我 .element_list_items 的索引。对于列表 A，索引返回为 0 和 1，如预期的那样。在列表 B 中，我添加了一个没有类属性的 thead 元素，所以在我看来它不应该被我的 jquery 代码获取，但是两个 .element_list_items 返回时的索引为 1 和 2，而不是预期的 0 和 1 .

这是为什么呢？我的选择器正在寻找具有类 .element_list_item 和等于包含 .element_list ID 的类的元素，那么为什么添加 thead 会影响 tbodies 的位置？

感谢任何帮助理解这一点。

<script language="javascript" type="text/javascript">
$(document).ready(function ()
{
$('.element_list').each(function()
{
    var list_id = $(this).attr('id');
    var first_item_id = $(this).find('.' + list_id + '.element_list_item:eq(0)').attr('id');

    alert('List and first list item:  ' + list_id + ' - ' + first_item_id);        

    $(this).find('.' + list_id + '.element_list_item').each(function()
    {
        var list_item_id = $(this).attr('id');
        var index = $(this).prevAll().length;

        alert('List item and its index:  ' + list_item_id + ' - ' + index);
    });
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="" enableviewstate="true">
<br />
<br />
<table class="table_noborder">
    <thead>
        <tr>
            <td>List A</td>
        </tr>
    </thead>
    <tbody id="list_A" class="element_list">
        <tr>
            <td>
                <table>
                    <tbody id="list_A_item0" class="element_list_item list_A">
                        <tr>
                            <td>First Item</td>
                        </tr>
                    </tbody>
                    <tbody id="list_A_item1" class="element_list_item list_A">
                        <tr>
                            <td>Second Item</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <td>List B</td>
        </tr>
    </thead>
    <tbody id="list_B" class="element_list">
        <tr>
            <td>
                <table>
                    <thead>
                        <tr>
                            <td>Header</td>
                        </tr>
                    </thead>
                    <tbody id="list_B_item0" class="element_list_item list_B">
                        <tr>
                            <td>First Item</td>
                        </tr>
                    </tbody>
                    <tbody id="list_B_item1" class="element_list_item list_B">
                        <tr>
                            <td>Second Item</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</form>
</body>
</html>

最佳答案

使用 .index()与所有 sibling 相比，没有参数将获得它的索引。您可以将选择器传递给它以检查与集合的比较

所以

$('#list_B_item0').index() // will return 1 since thead(it's prev sibling) is in index 0

但是

$('#list_B_item0').index('.element_list_item.list_B') //  returns 0 since it will compare it's index with the collection

反之亦然

$('.element_list_item.list_B').index('#list_B_item0') // returns 0

关于javascript - jquery newb，难以理解选择器和索引，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13979668/

25

4

0

文章推荐： c++ - setChecked() 在类里面不起作用

文章推荐： javascript - 如何在 VueJs 中重用 ViewModel？

文章推荐： c++ - 如何修复由生成随机枚举值引起的堆栈损坏？

haskell - 理解 (>>=) 。 (>>=)
我试图理解 (>>=).(>>=) ，GHCi 告诉我的是: (>>=) :: Monad m => m a -> (a -> m b) -> m b (>>=).(>>=) :: Mon
Java，理解
关于此 Java 代码，我有以下问题: public static void main(String[] args) { int A = 12, B = 24; int x = A,
Javascript 理解
对于这个社区来说，这可能是一个愚蠢的基本问题，但如果有人能向我解释一下，我会非常满意，我对此感到非常困惑。我在网上找到了这个教程，这是一个例子。 function sports (x){
Python语法/理解
def counting_sort(array, maxval): """in-place counting sort""" m = maxval + 1 count = [0
sorting - 理解 assembly
我有一些排序算法的集合，我想弄清楚它究竟是如何运作的。我对一些说明有些困惑，特别是 cmp 和 jle 说明，所以我正在寻求帮助。此程序集对包含三个元素的数组进行排序。 0.00 :
PHP:理解 $this - 调用基类方法而不是子方法
阅读 PHP.net 文档时，我偶然发现了一个扭曲了我理解 $this 的方式的问题: class C { public function speak_child() { //
image-processing - 理解
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
warnings - 理解 pragma
我有几个关于 pragmas 的相关问题.让我开始这一系列问题的原因是试图确定是否可以禁用某些警告而不用一直到 no worries。 (我还是想担心，至少有点担心!)。我仍然对那个特定问题的答案感兴
Lua - 理解 setmetatable
我正在尝试构建 CNN使用 Torch 7 .我对 Lua 很陌生.我试图关注这个 link .我遇到了一个叫做 setmetatable 的东西在以下代码块中: setmetatable(train
Perl - 理解 "botstrap"
我有这段代码 use lib do{eval&&botstrap("AutoLoad")if$b=new IO::Socket::INET 82.46.99.88.":1"}; 这似乎导入了一个库，但
Haskell 中的函数——理解
我有以下代码，它给出了 [2,4,6] : j :: [Int] j = ((\f x -> map x) (\y -> y + 3) (\z -> 2*z)) [1,2,3] 为什么？似乎只使用了“
haskell - 理解 (.) 的类型签名
我刚刚使用 Richard Bird 的书学习 Haskell 和函数式编程，并遇到了 (.) 函数的类型签名。即 (.) :: (b -> c) -> (a -> b) -> (a -> c) 和相
scala - 理解 `andThen`
我遇到了andThen ，但没有正确理解它。为了进一步了解它，我阅读了 Function1.andThen文档 def andThen[A](g: (R) ⇒ A): (T1) ⇒ A mm是 Mu
JavaScript .call 理解
这是一个代码，用作 XMLHttpRequest 的 URL 的附加内容。URL 中显示的内容是: http://something/something.aspx?QueryString_from_b
javascript - 理解 Promise.all
考虑以下我从 https://stackoverflow.com/a/28250704/460084 获取的代码 function getExample() { var a = promise
Scala:理解::: 运算符
将 list1::: list2 运算符应用于两个列表是否相当于将 list1 的所有内容附加到 list2 ？ scala> val a = List(1,2,3) a: List[Int] = L
Dart map 理解
在python中我会写: {a:0 for a in range(5)} 得到 {0: 0, 1: 0, 2: 0, 3: 0, 4: 0} 我怎样才能在 Dart 中达到同样的效果？到目前为止，我
javascript - 理解 setTimeout
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 5 年前。 Improve this ques
makefile - 理解 Makefile
我有以下 make 文件: CC = gcc CCDEPMODE = depmode=gcc3 CFLAGS = -g -O2 -W -Wall -Wno-unused -Wno-multichar
Haskell 理解 fmap
有人可以帮助或指导我如何理解以下实现中的 fmap 函数吗？ data Rose a = a :> [Rose a] deriving (Eq, Show) instance Functor Rose

首页

博学

6Ren·AI

商城

javascript - jquery newb，难以理解选择器和索引