Question

I have an array:

wireholder.wires[]

This array holds HTML tr elements with td children in each iteration:

wireholder.wires[1] = 
<tr class="trClass" id="blah">
    <td class="tdClass0">
         <select class="selectClass">
             <option value="1">Option1</option>
             <option value="2">Option2</option>
             <option value="3">Option3</option>
         </select>
    </td>
    <td class="tdClass1">
         <input class="inputClass1" type="text" />
    </td>
    <td class="tdClass2">
         <input class="inputClass2" type="text" />
    </td>
</tr>

I want to be able to target the class names in this arrays iteration.

Something like $(wireholder.wires[i].classNameHere) would be exactly what i’m after.

Has anyone heard of any ways to do something like this?

---

Solution

for(i=0;i<oldElement.length;i++){
    if($(node).find('.wire_selector_' + row).length){
        var oldWire = $(node).find('.wire_selector_' + row).val();
    }
    if($(node).find('.wire_length_' + row).length){
        var oldLength = $(node).find('.wire_length_' + row).val();
    }
    if($(node).find('.wire_retail_' + row).length){
        var oldPrice = $(node).find('.wire_retail_' + row).val()*100;
    }
}

---

For vol7ron

function DomFactory() 
{
    this.buildElement = function(elementType, props) {
        var el = document.createElement(elementType);
        for (var prop in props) {
            el.setAttribute(prop,  props[prop]);
        }
        return el;
    };

    this.buildTextNode = function(nodeData) {
        var node = document.createTextNode(nodeData);
        return node;
    };
}

Then using DomFactory:

var dom_builder = new DomFactory();
        var part_stub = dom_builder.buildElement("tr", {'class': "wiring_details_" + Wireholder.wires.length + "-" + part_id + "-" + zone_id, 'id': "wiring_rows_" + Wireholder.wires.length});
        var part_td = dom_builder.buildElement("td", {'colspan': '2'});
        var wire_type = dom_builder.buildTextNode("Wire Type: ");
        var select_wire = dom_builder.buildElement("select", {'class': 'wire_selector_' + Wireholder.wires.length, 'name': 'select_wire_' + Wireholder.wires.length});
        var wireValues = ["Select wire..", "14/2", "14/4", "16/4", "16/2", "RG6", "CAT5", "RG59", "LVT", "CAT6", "HDMI", "Shielded CAT6"];
        var length_stub = dom_builder.buildElement("td", {'colspan': '2'});
        var wire_length = dom_builder.buildTextNode("Length: ");
        var wire_length_input = dom_builder.buildElement("input", {'type': "text", 'class': 'wire_length_' + Wireholder.wires.length, 'name': 'wire_length_' + Wireholder.wires.length, 'value': '1'});
        var retail_stub = dom_builder.buildElement("td", {'colspan': '2'});
        var wire_retail_price = dom_builder.buildTextNode("Retail Price: ");
        var wire_retail_input = dom_builder.buildElement("input", {'type': "text", 'class': 'wire_retail_' + Wireholder.wires.length, 'name': 'wire_retail_' + Wireholder.wires.length, 'value': '0'});
        var total_stub = dom_builder.buildElement("td", {'colspan': '2', 'class': "wire_total"});
        var add_button = dom_builder.buildElement("a", {'href': "#", 'class': "add-button", 'id': "wiring_button_" + Wireholder.wires.length});
        var add_wire = dom_builder.buildTextNode("Add Wire");
        var wire_id = dom_builder.buildElement("input", {'type': "hidden", 'id': 'wire_id_<?php echo $part->id; ?>', 'name': 'wire_id_<?php echo $part->id; ?>', 'value': '<?php echo $part->wire_id; ?>'});
        that.appendChild(part_stub);
        Wireholder.wires.push(part_stub);

There is more but you get the idea…

Answer 1

Try this:

$(wireholder.wires[1]).find(".tdClass1")

By wrapping it with $() you make it into jQuery “collection” that can be searched for specific class etc..