tags:

views:

51

answers:

4

My approximate HTML:

<div id='ComputerID'></div>

<table id='gridComputerApps'>
<tr>
  <td><div class='licenseOutput'/></td> <td><div class='AppName'>IE6</div></td>
  <td><div class='licenseOutput'/></td> <td><div class='AppName'>Firefox</div></td>
  <td><div class='licenseOutput'/></td> <td><div class='AppName'>SuperApp #2</div></td>
</tr>
</table>

(Note, there are possibly other columns mixed in here, so I want to be selecting on class name).

So, using jQuery, I have to act on each row in this table.
For each row, I have to pass: ('#ComputerID').val(), ('.AppName').val() and ('.licenseOuput') into a javascript function, which then using the values for ComputerID and AppName, sets the text and color of the licenseOutput div.

So, I am thinking something starting with the following might work:

    $('#gridComputerApps').children('tr').each(function() {  
        //so, do I now have access to all the ,tr> elements within #gridComputerapps?  
        //now, how do i select the subordinate elements, for each row???  
 });

SOLUTION

Here's what finally worked for me:

    $('#gridComputerApps tr').each(function() {
        var networkUserID = $("#PrimaryUserNetworkID").text();
        var appName = $(this).find(".AppName").text();
        var licenseOutputCell = $(this).find(".licenseOutput");
        if (appName != '') CheckAppSecForUser(licenseOutputCell, appName, networkUserID);
    });

Important note to asp.net users:
From what I can tell, setting ControlStyle-CssClass="AppName" on an asp BoundField is useless, and the classname is never output to the html.
Instead, I had to make a template field, and wrap the boundfield in a div, like so:

<asp:TemplateField HeaderText="Application Name" Visible="True" HeaderStyle-Width="15%" ItemStyle-VerticalAlign="Top">
                            <ItemTemplate><div class="xxxAppName"><%#Eval("Application.NormalizedAppName")%></div></ItemTemplate>
                        </asp:TemplateField>
A: 

There are many different ways to traverse the DOM with jQuery. I would advise being as specific as possible with your selectors to begin and then work from there. Here are some ideas to get you thinking

$('#gridComputerApps').children('tr').each(function() {  
    var $tr = $(this);

    // all td elements in the row.
    $tr.children('td'); 

    // you could use position to get the first td
    // this is the tr element in this case(!)
    var tdFirst = $('td:first', this);

    // you could get the next td like so
    // nextAll() will get the next td, next() will only get the next sibling
    tdFirst.nextAll('td');

    // get the 3rd td element.
    $tr.children('td').get(2); 

    // get the 3rd td element as a jQuery object
    $tr.children('td').eq(2);

});
Russ Cam
A: 
$("#gridComputerApps").children("tr").each(function(){
    $(this).children(".licenseOutput").each(function(){
        // do stuff with licenseOutput 
    });
    $(this).children(".AppName").each(function(){
        // do stuff with AppName
    });
});

or you could do:

$("#gridComputerApps").children("td").each(function(){
    // do stuff with each cell
});

Is that what you're after?

inkedmn
children() only gets the immediate children, not all descendant children. You could use $("#gridComputerApps td") to do what you're suggesting
Russ Cam
+2  A: 

How about:

var computerID = $("#ComputerID").text();

$('#gridComputerApps').children('tr').each(function() {
  var appName = $(this).find(".AppName").text();
  var licenseOutput = $(this).find(".licenseOutput").text();

  // do something with them
  yourFunc(computerID, appName, licenseOutput);
});

Would that do it?

richsage
I don't think this would work because in the example, there are three of each class per row
fudgey
You're right - I'm seeing imaginary <tr>'s :-)
richsage
Thanks Rich, yours set me in the right direction (SEE UPDATED QUESTION FOR THE CODE THAT WORKED)
tbone
A: 

How about trying this - I KNOW it works because I tested it:

var cID = $('#ComputerID').text();

$("#gridComputerApps").find("tr").each(function(){
 var license = $(this).find(".licenseOutput");
 var appname = $(this).find(".AppName");

 for (i=0;i<license.length;i++){
  yourFunction ( cID, $(license[i]).text(), $(appname[i]).text() );
 }
});
fudgey
Actually this is correct....had to read it 2 times before it made sense to me though, the loop on the license.length while technically correct, is very misleading. This implies there are more than one per row, and also that there are a matching number of licenseOutput and AppName classes per row.
tbone
According to your HTML, you only have one row with six cells, so there is more than one licenseOutput and Appname per table row. I wrote this in case you had more than one row that is set up in this manner... if each row had one licenseOutput and Appname, then richsage's answer would work for you
fudgey