Rendering elements (which can change numbers) using jQuery The 2019 Stack Overflow Developer Survey Results Are In Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)jQuery highlightNavigation pluginCustom slide show scriptImplementation quality of my afterthought jQuery drop-down menu?Append table cells to select boxes in indexed orderInterupt redirect to catch potential newsletter signupjQuery on-change using multiple selectorsAdd multiple data attributes to elements using jQueryWeb-based test settings manager appPhishing application God classAdd Colour Tags on Click - Version 2

In horse breeding, what is the female equivalent of putting a horse out "to stud"?

How did passengers keep warm on sail ships?

Take groceries in checked luggage

The variadic template constructor of my class cannot modify my class members, why is that so?

How to politely respond to generic emails requesting a PhD/job in my lab? Without wasting too much time

How do I add random spotting to the same face in cycles?

Is it ethical to upload a automatically generated paper to a non peer-reviewed site as part of a larger research?

How should I replace vector<uint8_t>::const_iterator in an API?

Can smartphones with the same camera sensor have different image quality?

How does ice melt when immersed in water?

Road tyres vs "Street" tyres for charity ride on MTB Tandem

Can the prologue be the backstory of your main character?

The following signatures were invalid: EXPKEYSIG 1397BC53640DB551

How long does the line of fire that you can create as an action using the Investiture of Flame spell last?

How can I define good in a religion that claims no moral authority?

What do you call a plan that's an alternative plan in case your initial plan fails?

Who or what is the being for whom Being is a question for Heidegger?

How do you keep chess fun when your opponent constantly beats you?

"... to apply for a visa" or "... and applied for a visa"?

Is it ok to offer lower paid work as a trial period before negotiating for a full-time job?

Did God make two great lights or did He make the great light two?

How to delete random line from file using Unix command?

Match Roman Numerals

How to colour the US map with Yellow, Green, Red and Blue to minimize the number of states with the colour of Green



Rendering elements (which can change numbers) using jQuery



The 2019 Stack Overflow Developer Survey Results Are In
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)jQuery highlightNavigation pluginCustom slide show scriptImplementation quality of my afterthought jQuery drop-down menu?Append table cells to select boxes in indexed orderInterupt redirect to catch potential newsletter signupjQuery on-change using multiple selectorsAdd multiple data attributes to elements using jQueryWeb-based test settings manager appPhishing application God classAdd Colour Tags on Click - Version 2



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








1












$begingroup$


Currently when the user selects some tags in my app I generate them in a function, like this:



// Show tags that are currently used in search
var htmlNodes = '<ul class="tags">';

// If no pinned nodes, reset not found nodes
if (graphFactory.existPinnedNodes() == false)
graphFactory.updateNotFoundNodes();


// Add not found nodes as tags (gray)
for (let x = 0; x < graphFactory.getNotFoundNodes().length; x++)
htmlNodes = htmlNodes + '<li><a class="notfound" href="#">' + graphFactory.getNotFoundNodes()[x] + '</a></li>';


// Add pinned nodes as tags (blue)
for (let q = 0; q < graphFactory.getPinnedNodes().length; q++)
htmlNodes = htmlNodes + '<li><a href="#">' + graphFactory.getPinnedNodes()[q] + '</a></li>';


htmlNodes = htmlNodes + '<div class="tagsend"></div></ul>';
$('#pinnednodeslist').html(htmlNodes);


Basically I create a <ul> of class tags, add some li elements with a specific tag each, and then render it into the #pinnednodeslist element.



As you can see, the number of <li> elements might change, depending on the number of getPinnedNodes or getNotFoundNodes, so I wonder if I have to reconstruct this html every time or if there is a more efficient way to do that...



Maybe a better way is that I don't have to mix so much HTML with my code?



For instance, I was thinking to leave all the elements there and just make them invisible, simply adding a class to show them and the html content to display within... But maybe you know of some other better way to do that?










share|improve this question









New contributor




Dmitry Paranyushkin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.







$endgroup$


















    1












    $begingroup$


    Currently when the user selects some tags in my app I generate them in a function, like this:



    // Show tags that are currently used in search
    var htmlNodes = '<ul class="tags">';

    // If no pinned nodes, reset not found nodes
    if (graphFactory.existPinnedNodes() == false)
    graphFactory.updateNotFoundNodes();


    // Add not found nodes as tags (gray)
    for (let x = 0; x < graphFactory.getNotFoundNodes().length; x++)
    htmlNodes = htmlNodes + '<li><a class="notfound" href="#">' + graphFactory.getNotFoundNodes()[x] + '</a></li>';


    // Add pinned nodes as tags (blue)
    for (let q = 0; q < graphFactory.getPinnedNodes().length; q++)
    htmlNodes = htmlNodes + '<li><a href="#">' + graphFactory.getPinnedNodes()[q] + '</a></li>';


    htmlNodes = htmlNodes + '<div class="tagsend"></div></ul>';
    $('#pinnednodeslist').html(htmlNodes);


    Basically I create a <ul> of class tags, add some li elements with a specific tag each, and then render it into the #pinnednodeslist element.



    As you can see, the number of <li> elements might change, depending on the number of getPinnedNodes or getNotFoundNodes, so I wonder if I have to reconstruct this html every time or if there is a more efficient way to do that...



    Maybe a better way is that I don't have to mix so much HTML with my code?



    For instance, I was thinking to leave all the elements there and just make them invisible, simply adding a class to show them and the html content to display within... But maybe you know of some other better way to do that?










    share|improve this question









    New contributor




    Dmitry Paranyushkin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.







    $endgroup$














      1












      1








      1





      $begingroup$


      Currently when the user selects some tags in my app I generate them in a function, like this:



      // Show tags that are currently used in search
      var htmlNodes = '<ul class="tags">';

      // If no pinned nodes, reset not found nodes
      if (graphFactory.existPinnedNodes() == false)
      graphFactory.updateNotFoundNodes();


      // Add not found nodes as tags (gray)
      for (let x = 0; x < graphFactory.getNotFoundNodes().length; x++)
      htmlNodes = htmlNodes + '<li><a class="notfound" href="#">' + graphFactory.getNotFoundNodes()[x] + '</a></li>';


      // Add pinned nodes as tags (blue)
      for (let q = 0; q < graphFactory.getPinnedNodes().length; q++)
      htmlNodes = htmlNodes + '<li><a href="#">' + graphFactory.getPinnedNodes()[q] + '</a></li>';


      htmlNodes = htmlNodes + '<div class="tagsend"></div></ul>';
      $('#pinnednodeslist').html(htmlNodes);


      Basically I create a <ul> of class tags, add some li elements with a specific tag each, and then render it into the #pinnednodeslist element.



      As you can see, the number of <li> elements might change, depending on the number of getPinnedNodes or getNotFoundNodes, so I wonder if I have to reconstruct this html every time or if there is a more efficient way to do that...



      Maybe a better way is that I don't have to mix so much HTML with my code?



      For instance, I was thinking to leave all the elements there and just make them invisible, simply adding a class to show them and the html content to display within... But maybe you know of some other better way to do that?










      share|improve this question









      New contributor




      Dmitry Paranyushkin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.







      $endgroup$




      Currently when the user selects some tags in my app I generate them in a function, like this:



      // Show tags that are currently used in search
      var htmlNodes = '<ul class="tags">';

      // If no pinned nodes, reset not found nodes
      if (graphFactory.existPinnedNodes() == false)
      graphFactory.updateNotFoundNodes();


      // Add not found nodes as tags (gray)
      for (let x = 0; x < graphFactory.getNotFoundNodes().length; x++)
      htmlNodes = htmlNodes + '<li><a class="notfound" href="#">' + graphFactory.getNotFoundNodes()[x] + '</a></li>';


      // Add pinned nodes as tags (blue)
      for (let q = 0; q < graphFactory.getPinnedNodes().length; q++)
      htmlNodes = htmlNodes + '<li><a href="#">' + graphFactory.getPinnedNodes()[q] + '</a></li>';


      htmlNodes = htmlNodes + '<div class="tagsend"></div></ul>';
      $('#pinnednodeslist').html(htmlNodes);


      Basically I create a <ul> of class tags, add some li elements with a specific tag each, and then render it into the #pinnednodeslist element.



      As you can see, the number of <li> elements might change, depending on the number of getPinnedNodes or getNotFoundNodes, so I wonder if I have to reconstruct this html every time or if there is a more efficient way to do that...



      Maybe a better way is that I don't have to mix so much HTML with my code?



      For instance, I was thinking to leave all the elements there and just make them invisible, simply adding a class to show them and the html content to display within... But maybe you know of some other better way to do that?







      javascript jquery interface






      share|improve this question









      New contributor




      Dmitry Paranyushkin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      Dmitry Paranyushkin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited 2 mins ago









      Jamal

      30.6k11121227




      30.6k11121227






      New contributor




      Dmitry Paranyushkin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 20 hours ago









      Dmitry ParanyushkinDmitry Paranyushkin

      1062




      1062




      New contributor




      Dmitry Paranyushkin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Dmitry Paranyushkin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Dmitry Paranyushkin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.




















          0






          active

          oldest

          votes












          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "196"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );






          Dmitry Paranyushkin is a new contributor. Be nice, and check out our Code of Conduct.









          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f217377%2frendering-elements-which-can-change-numbers-using-jquery%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          Dmitry Paranyushkin is a new contributor. Be nice, and check out our Code of Conduct.









          draft saved

          draft discarded


















          Dmitry Paranyushkin is a new contributor. Be nice, and check out our Code of Conduct.












          Dmitry Paranyushkin is a new contributor. Be nice, and check out our Code of Conduct.











          Dmitry Paranyushkin is a new contributor. Be nice, and check out our Code of Conduct.














          Thanks for contributing an answer to Code Review Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          Use MathJax to format equations. MathJax reference.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f217377%2frendering-elements-which-can-change-numbers-using-jquery%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          名間水力發電廠 目录 沿革 設施 鄰近設施 註釋 外部連結 导航菜单23°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.7113923°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.71139計畫概要原始内容臺灣第一座BOT 模式開發的水力發電廠-名間水力電廠名間水力發電廠 水利署首件BOT案原始内容《小檔案》名間電廠 首座BOT水力發電廠原始内容名間電廠BOT - 經濟部水利署中區水資源局

          Is my guitar’s action too high? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)Strings too stiff on a recently purchased acoustic guitar | Cort AD880CEIs the action of my guitar really high?Μy little finger is too weak to play guitarWith guitar, how long should I give my fingers to strengthen / callous?When playing a fret the guitar sounds mutedPlaying (Barre) chords up the guitar neckI think my guitar strings are wound too tight and I can't play barre chordsF barre chord on an SG guitarHow to find to the right strings of a barre chord by feel?High action on higher fret on my steel acoustic guitar

          香港授勳及嘉獎制度 目录 勳章及獎狀類別 嘉獎等級 授勳及嘉獎提名 統計數字 多次獲頒勳章或獎狀的人士 爭議 褫奪機制 参考文献 外部連結 参见 导航菜单統計數字一九九七年七月二日(星期三)香港特別行政區的授勳制度六七暴動領袖獲大紫荊勳章 董建華被斥為肯定殺人放火董建華授勳楊光 議員窮追猛打蘋論:顛倒是非黑白的大紫荊董讚楊光有貢獻避談暴動董拒答授勳楊光原因撤除勳銜撤除勳銜撤除勳銜特首掌「搣柴」生殺權行為失當罪 隨時「搣柴」失長糧政府刊憲 許仕仁郭炳江遭「搣柴」去年中終極上訴失敗 許仕仁郭炳江撤勳章太平紳士猛料阿Sir講古—— 「搣柴」有故一九九八年授勳名單一九九九年授勳名單二○○三年授勳名單二○○八年授勳名單二○○七年授勳名單政府總部禮賓處 - 授勳及嘉獎香港特別行政區勳章綬帶一覽(PDF)(非官方)