How to get all elements inside div that starts with a known text

Question

I have a div element in an HTML document   I would like to extract all elements inside this div with id attributes starting with a known string  e g   q17      How can I achieve this using JavaScript    If needed  for simplicity  I can assume that all elements inside the div are of type input or select

User · Accepted Answer

var matches       var searchEles   document getElementById  myDiv   children  for var i   0  i  lt  searchEles length  i          if searchEles i  tagName     SELECT     searchEles tagName     INPUT             if searchEles i  id indexOf  q1       0                matches push searchEles i                        Once again  I strongly suggest jQuery for such tasks       myDiv  input   hide        input matches all input elements  including selects

User · Answer

Option 1  Likely fastest  but not supported by some browsers if used on Document or SVGElement     var elements   document getElementById  parentContainer   children    Option 2  Likely slowest    var elements   document getElementById  parentContainer   getElementsByTagName         Option 3  Requires change to code  wrap a form instead of a div around it        Since what you re doing looks like it should be in a form    var elements   document forms  parentContainer   elements   var matches        for  var i   0  i  lt  elements length  i        if  elements i  value indexOf  q17       0          matches push elements i

User · Answer

With modern browsers  this is easy without jQuery   document getElementById  yourParentDiv   querySelectorAll   id   q17         The querySelectorAll takes a selector  as per CSS selectors  and uses it to search children of the  yourParentDiv  element recursively  The selector uses    which means  starts with    Note that all browsers released since June 2009 support this

User · Answer

var  list       divname input id   q17            get all input controls with id q17      once you have  list you can do whatever you want  var ControlCnt    list length     Now loop through list of controls  list each  function          var id     this  prop  id            get id     var cbx           if    this  is   checkbox        this  is   radio                 Need to see if this control is checked           else               Nope  not a checked control - so do something else

User · Answer

i have tested a sample and i would like to share this sample and i am sure it s quite help full   I have done all thing in body  first creating an structure there on click of button you will call a  function selectallelement    on mouse click which will pass the id of that div about which you want to know the childrens   I have given alerts here on different level so u can test where r u now in the coding         lt body gt       lt h1 gt javascript to count the number of children of given child lt  h1 gt        lt div id  count  gt       lt span gt a lt  span gt       lt span gt s lt  span gt       lt span gt d lt  span gt       lt span gt ff lt  span gt       lt div gt fsds lt  div gt       lt p gt fffff lt  p gt       lt  div gt      lt button type  button  onclick  selectallelement  count    gt click lt  button gt      lt p gt total element no  lt  p gt       lt p id  sho  gt here lt  p gt     lt script gt     function selectallelement divid       alert divid    var ele   document getElementById divid  children   var match   new Array      var i   fillArray ele match     alert i      document getElementById  sho   innerHTML   i       function fillArray e1 a1       alert  we are here       for var i  0 i lt e1 length i        if e1 i  id indexOf  count      0      a1 push e1 i      return i           lt  script gt     lt  body gt     USE THIS I AM SURE U WILL GET YOUR ANSWER    THANKS

User · Answer

Presuming every new branch in your tree is a div  I have implemented this solution with 2 functions   function fillArray vector1 vector2       for  var i   0  i  lt  vector1 length  i             if  vector1 i  id indexOf  q17       0              vector2 push vector1 i            if vector1 i  tagName     DIV               fillArray  document getElementById vector1 i  id  children vector2            function selectAllElementsInsideDiv divId        var matches   new Array        var searchEles   document getElementById divId  children      fillArray searchEles matches       return matches      Now presuming your div s id is  myDiv   all you have to do is create an array element and set its value to the function s return   var ElementsInsideMyDiv   new Array    ElementsInsideMyDiv    selectAllElementsInsideDiv  myDiv     I have tested it and it worked for me  I hope it helps you

[javascript] How to get all elements inside "div" that starts with a known text

Examples related to javascript

Examples related to html