Question

So I am displaying graphs based on selection of checkboxes and have run into a small problem.

I am currently looping through and selecting only the first graph, even when a select-all checkbox is checked – meaning I get however many amounts of the same first graph instead of the ten unique graphs.

As you will see in the code below, the previous line I was using that is commented out:

//var fnInstance=$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].attributes[1].value;

Works perfectly in Firefox ONLY – it displays all graphs correct etc. but does not work in Chrome/IE due to the way it is attempting to access elements.

I have replaced it with these two lines:

$el = $('#counterTreeviewUL'+idTreeview).first();
var fnInstance = $el.find("input").attr("onclick");

The two lines I have replaced it with cause everything to function in all three browsers (no errors in IE or Chrome anymore), however the only graph that is ever shown is the first one found – if three elements have been selected then 3 versions of the first graph will show instead of the 3 unique ones.

The full code is below, and console.logs of what the elements contain are below that:

for (var i=0;i<$('#counterTreeviewUL'+idTreeview)[0].children.length;i++)
{

 if (!$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].checked)
 {  
        $('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].checked=true;


//var fnInstance=$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].attributes[1].value;

        $el = $('#counterTreeviewUL'+idTreeview).first();
        var fnInstance = $el.find("input").attr("onclick");


        fnInstance=fnInstance.substr(15).substr(0,fnInstance.length-2);

        var flagsInstance=fnInstance.split(new RegExp(","));

        var graph = {
                id: seqId,
                entityName: flags[6].substr(1).substr(0, flags[6].length - 2),
                entity: flags[5].substr(1).substr(0, flags[5].length - 2),
                idCounter: flags[4],
                counterName: flags[3].substr(1).substr(0, flags[3].length - 2),
                ivmanager: flags[7].substr(1).substr(0, flags[7].length - 2),
                chart: null,
                pointsToShowX: null,
                borneInf: null,
                unite: "",
                idInstance: flagsInstance[2].substr(1).substr(0, flagsInstance[2].length - 2),
                instanceName: flagsInstance[3].substr(1).substr(0, flagsInstance[3].length - 2),
                listPdsNull: new Array(),
                countInstance: idTreeview + "_" + i,
                countGraph: -1
            };

        seqId++;        
        graphs[graphsLastId]=graph;     
        graphsLastId++;
    }
}

Console.logs of elements:

Any help would be greatly appeciated as I have spent hours trying to work out (another previous employee’s) code..

I basically just need a browser-friendly version of this line –

 var fnInstance=$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].attributes[1].value;

Answer 1

Original:

fnInstance=$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].attributes1.value;

My suggestion:

var changedIforPsedoSelctor = i+1;
var nthChild = ":nth-child("+changedIforPsedoSelctor+")";
var fnInstance = $('#counterTreeviewUL'+idTreeview).children(nthChild).children(":first-child").attr("onclick");

I believe that should do it, however it would be much easier to answer your questions if you provided the HTML markup for this particular problem. I am also assuming that attributes[1] is equal to “onclick” in the selector.