如何搜索父级 div 的所有子级、子级的子级等等？

Question

我有一个配置，类似这样令人困惑的东西：

<ListView>
    <ItemTemplate>
        <div id="Content">
            <asp: TextBox ID="OuterTextBox" />
            <div id="Controls">
                <asp: ComboBox ID="InnerComboBox"/>
            </div>
            <div>
                <asp: Button ID="Submit" />
            </div>
        </div>
    </ItemTemplate>
<ListView>

我知道这有点奇怪，这只是一个模型。实际情况更糟。这是一个ItemTemplate，因此在编译页面时显然会动态生成ID。我想做的是使用jquery创建一个对象，从标记为“Content”的div级别开始，然后递归地搜索其所有子元素以查找每个指定控件的值。在这个示例中，它们是OuterTextBox和InnerComboBox。令我困惑的是元素的荒谬层次结构。我如何最有效地做到这一点？我只能假设不久之后，div的层次结构将发生变化，因此我希望得到的内容不会因为移动某些内容而立即崩溃，因此对控件的显式路径不起作用。以下是我目前正在尝试扩展的概念：

function ClientIDS(obj) {

   var txt = $(obj).prevAll('input[id*="txtTextBox"]:first');
   alert($(txt).val());

   return false;
} 

我会这样做：在服务器控件中添加 OnClientClick="ClientIDS(this)"。

当所有控件都在同一个 div 中（作为兄弟元素）时，此代码简单干净，完美运行。当控件被拆分到类似于这样的 div 中时，有人能想出一种类似且简单的方法来查找控件吗？

- Sinaesthetic

---

将它们放在一个表单中，然后它们就可以作为该表单的“元素”集合的属性被访问。 - RobG

Answer 1

通常，您在查找与您位于同一容器中但不一定是兄弟姐妹的其他项时，可以使用 .closest() 查找所需的共同祖先容器，然后使用 class 名称使用 .find() 在该容器中查找实际要查找的元素。

我不确定您的点击从哪里开始，但假设您有多个项目来自此已修改为具有几个类的 itemTemplate：

<ListView>
    <ItemTemplate>
        <div class="Content">
            <asp: TextBox ID="OuterTextBox" class="textbox"/>
            <div id="Controls">
                <asp: ComboBox ID="InnerComboBox"/>
            </div>
            <div>
                <asp: Button ID="Submit" />
            </div>
        </div>
    </ItemTemplate>
    <ItemTemplate>
        <div class="Content">
            <asp: TextBox ID="OuterTextBox" class="textbox"/>
            <div id="Controls">
                <asp: ComboBox ID="InnerComboBox"/>
            </div>
            <div>
                <asp: Button ID="Submit" />
            </div>
        </div>
    </ItemTemplate>
<ListView>

然后，从提交按钮开始，您可以使用：

$(this).closest(".Content").find(".textbox")

这将为您提供与单击的按钮相同容器中的文本框。

- jfriend00

---

这听起来很完美，我会试一试。 - Sinaesthetic

可以了！我知道它很简单，但我仍在学习选择器如何向上反向工作。谢谢 :) - Sinaesthetic

Answer 2

如果我理解你的意思正确，你可以尝试：

$('#content').find('input').each(function(){
      //do something
});

input选择器显然可以被替换为另一个选择器，如某个类。

- Paul Grimshaw

---

div在项模板中，因此它的名称也将在编译时生成。 - Sinaesthetic

把一个类附加到它上面，然后使用这个类作为选择器，而不是使用ID，怎么样？ - Paul Grimshaw

我试过了。类似这样的 var topLevel = $(this).parent().parent().parent(); 然后 topLevel.find(".controlTag").val(); 没有真正起作用。 - Sinaesthetic

如果您给Content div一个cssclass =“content”，那么您可以使用$(this).parent（'.content'）。find（'.controlTag'）.each（function（）{alert（$（this）。val（））;}）; - Paul Grimshaw