How to search for all children and children of children, etc. parent div

I have a setup, something confusing:

<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 obviously it will generate ids dynamically when the page is compiled. What I am trying to do is use jquery to create an object that starts at the div level that says Content, and then search all of its children (recursively) to find the value of each specified control. In this example, these are OuterTextBox and InnerComboBox. I am confused by the ridiculous hierarchy of elements. How can I do this most efficiently? I can only assume that there will be changes in the div hierarchy soon along the way, so I'm hoping to get something that doesn't break as soon as I translate something, so explicit paths to the controls don't go to work. Here's the concept I'm currently trying to expand on:

function ClientIDS(obj) {

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

   return false;
} 

      

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

This code is simple and clean and works great when all the controls are in the same div (like siblings). Can anyone think of a way to find controls in a similar, easy way, where the controls would be split into divs like this?

+3


source to share


2 answers


The usual way to search for other items in the same container as you, but not necessarily siblings, is to use the .closest()

generic predefined constant to find the desired, and then use the .find()

class names to find the actual item you are looking for in that container.

I'm not sure exactly where your click starts, but let's say you had multiple items that came from this itemTemplate, which I modified to have multiple 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 can use:

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

      

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

+3


source


If you understand correctly, you can try:

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

      



The selector input

can obviously be replaced with another selector such as a specific class.

0


source







All Articles