Question

This is a slightly odd one, note I can’t change the HTML as it’s generated by doxygen.

I’m trying to change how the file browser javascript works, currently if you click on a folder it expands fully all the folders beneath it. Instead I want to just display folders and files that are directly in the folder.

The HTML is something like (invalid html for simplicity here)

<table>
<tr id="row_0" onclick="toggleFolder(0)">Folder1</tr>
<tr id="row_0_0" onclick="toggleFolder(0_0)">Project1</tr>
<tr id="row_0_0_0">File1.c</tr>
<tr id="row_1" onclick="toggleFolder(1)>Folder 2</tr>
</table>

Which represents a structure like:

• Folder 1
  • Project 1
    • File1
• Folder 2

Currently doxygen’s javascript toggleFolder function works like the below (I’ve added comments to explain what’s going on).

function toggleFolder(id)
{
  var n = $('[id^=row_'+id+']'); //all rows "beneath" the clicked one
  var i = $('[id^=img_'+id+']'); //img's in rows "beneath" clicked
  var a = $('[id^=arr_'+id+']'); //a's in rows "beneath" clicked
  var c = n.slice(1); //remove the first match (the clicked row)

  //If the first element (reduce matches) is visible hide everything...
  if (c.filter(':first').is(':visible')===true) {
    i.attr('src','ftv2folderclosed.png'); //probably not needed
    a.attr('src','ftv2pnode.png'); //probably not needed
    c.hide();
  } else {
    i.attr('src','ftv2folderopen.png');
    a.attr('src','ftv2mnode.png');
    c.show();
  }
  updateStripes(); //update even/odd classes
}

Instead I just want to select row_0_0 when I click on row_0 and not row_0_0_0, how can I change the selector to implement this?

Thanks for your time!

---

In the end I used something like the below, based on the accepted answer

Where rows is just a $(tr) equivalent

  //Only match elements AFTER this one (can't hide elements before)
  var childRows = rows.filter(function() {
    re = new RegExp('^row_'+id+'\\d+_$', "i"); //only one sub
    return this.id.match(re);
  });

  //All sub images
  var childImages = childRows.find("img");

  //Only the img images
  var childImg = childImages.filter("[id^=img]");

  //Only the arr images
  var childArr = childImages.filter("[id^=arr]");

Answer 1

Replace:

var n = $('[id^=row_'+id+']');

with:

var n = $("tr").filter(function() {
    re = new RegExp('^row_'+id+'_\\d+$', "i");
    return this.id.match(re);
});

The equvialent code will work for images/anchors too (but I not see example in your question, so can’t write correct filter).