如何搜寻所有的儿童及儿童的儿童，等等的一个家长分区

I have a setup, something confusing like this:

我有一个设置，像这样令人困惑的东西:

<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>

Wonky I know, this is just a mockup. The real thing is worse. This is an ItemTemplate so this is obviously going to dynamically generate IDs when the page is compiled. What I'm trying to do is use jquery to create an object that starts at the level of the div labeled "Content", then search all of it's children (recursively) to find the value of each specified control. In this example, they are OuterTextBox and InnerComboBox. What is confusing me is the ridiculous hierarchy of elements. How do I do this the most efficiently? I can only assume that shortly down the road, there will be changes to the hierarchy of divs, so I'm hoping to get something that won't break as soon as I move something, so explicit paths to the controls aren't going to work. Here is the concept I'm currently trying to expand on:

我知道，这只是个模型。实际情况更糟。这是一个ItemTemplate所以很明显，当页面被编译时，它会动态地生成id。我要做的是使用jquery创建一个对象，该对象从标记为“Content”的div开始，然后搜索它的所有子控件(递归地)，以找到每个指定控件的值。在本例中，它们是OuterTextBox和InnerComboBox。让我困惑的是元素的荒谬层次。我怎样才能最有效地做到这一点?我只能假设不久之后，divs的层次结构将会发生变化，所以我希望得到的东西不会在我移动一些东西时就坏掉，所以到控件的显式路径不会起作用。以下是我目前试图扩展的概念:

function ClientIDS(obj) {

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

   return false;
}

I would then do something like OnClientClick="ClientIDS(this)" in the server control.

然后在服务器控件中执行类似OnClientClick=“ClientIDS(this)”的操作。

This code is simple and clean, and worked perfectly when all of the controls were in the same div (as siblings). Can anyone come up with a way to find the controls in a similar, simple fashion to this when the controls get broken up by divs like this?

这段代码简单而干净，并且在所有控件都位于同一个div(与其他控件一样)时工作得很好。有人能想出一种方法来找到类似的、简单的控件吗?

2 个解决方案

#1

The usual way you find other items in the same container as you, but not necessarily siblings is to use .closest() to find the desired common ancestor constainer and then use .find() to find the actual element you're looking for in that container using class names.

在与您相同的容器中找到其他项(但不一定是兄弟项)的通常方法是使用. closer()查找所需的共同祖先保持器，然后使用.find()使用类名查找该容器中要查找的实际元素。

I'm not sure exactly where your click starts, but lets say you had multiple items that came from this itemTemplate that I've modified to have a few classes:

我不确定你的点击从哪里开始，但假设你有多个项目来自这个项目模板，我已经修改为有几个类:

<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>

Then, from the submit button, you could use:

然后，从提交按钮，您可以使用:

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

And that would give you the textbox that was in the same container as the button that was clicked on.

这会给你一个文本框，它和点击的按钮在同一个容器中。

#2

If I understand you correctly, you could try:

如果我理解正确，你可以试着:

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

The input selector could obviously be replaced with another selector, such as a certain class.

显然可以用另一个选择器替换输入选择器，例如某个类。

#1