locked
Specifying attribute name matching a variable does not work RRS feed

  • Question

  • User1493428334 posted

    Hi everyone,

    The following does not work: $(e.target).find("tr[class=prodId]"); where prodId = "P123", for example.

    However, when I use a literal in place of a variable, e.g., $(e.target).find("tr[class='P123']"); works.

    My question is: is there anyway to find an HTML element, such as 'tr' in the above example, whose attribute value equal to a given variable?

    Thanks,

    Golden

    Tuesday, November 19, 2019 11:11 PM

Answers

  • User-474980206 posted

    in moderen javascript its:

      $(e.target).find(`tr[class=${prodId}]`);

    in classic its:

      $(e.target).find("tr[class=" + prodId +"]");

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 19, 2019 11:16 PM
  • User288213138 posted

    Hi GoldenMicrosoft,

    But the "break" caused failure that the rest of the code (not shown) was not executed.

    The break statement exits a switch statement or a loop (for, for ... in, while, do ... while), if you want to excute the first occurance, you can try to use "return" instead of break.

    More information about the use of break you can refer to this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 20, 2019 10:39 AM
  • User-474980206 posted

    the .each() is making a function call. jQuery added break support it:

     

    $(e.target).find("tr").each(function (idx, myElem) {
           if ($(myElem).attr("class") == pid) {
                myTr = myElem; 
                return false;   // this will break the .each() loop
            }   
    });

    your code is much slower than passing the computed string to jquery, because jquery can use the browsers built-in document.querySelector(). also if you are only interested in the first match, you should add to the query (so it can do the break on first match):

      var q = $(e.target).find("tr[class=" + prodId +"]:first");

    note: chrome, firefox & safari supports javascript template strings. you probably did not use the backquote:

    var p1 = "hello";
    var p2 = "jon";
    var s = `${p1} ${p2}`;  // "hello john"

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 20, 2019 6:16 PM

All replies

  • User-474980206 posted

    in moderen javascript its:

      $(e.target).find(`tr[class=${prodId}]`);

    in classic its:

      $(e.target).find("tr[class=" + prodId +"]");

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 19, 2019 11:16 PM
  • User1493428334 posted

    Hi Bruce,

    Thanks so much for your help.

    I tested both ways:

    The modern one does not work (I used Google Chrome and Microsoft Edge, both failed)

    The classic one works.

    Meanwhile, one more question:

    Before I got your help, I got around the problem by using an "each" loop, as follow:

    $(e.target).find("tr").each(function (idx, myElem) {
           if ($(myElem).attr("class") == pid) {
                myTr = myElem; 
                break;   // this break causes failure
            }   
    });

    I used  "break" above because I was interested only in the first occurance. But the "break" caused failure that the rest of the code (not shown) was not executed.
    Why? 

    Thanks again,  
    Golden

    Wednesday, November 20, 2019 3:00 AM
  • User288213138 posted

    Hi GoldenMicrosoft,

    But the "break" caused failure that the rest of the code (not shown) was not executed.

    The break statement exits a switch statement or a loop (for, for ... in, while, do ... while), if you want to excute the first occurance, you can try to use "return" instead of break.

    More information about the use of break you can refer to this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 20, 2019 10:39 AM
  • User-474980206 posted

    the .each() is making a function call. jQuery added break support it:

     

    $(e.target).find("tr").each(function (idx, myElem) {
           if ($(myElem).attr("class") == pid) {
                myTr = myElem; 
                return false;   // this will break the .each() loop
            }   
    });

    your code is much slower than passing the computed string to jquery, because jquery can use the browsers built-in document.querySelector(). also if you are only interested in the first match, you should add to the query (so it can do the break on first match):

      var q = $(e.target).find("tr[class=" + prodId +"]:first");

    note: chrome, firefox & safari supports javascript template strings. you probably did not use the backquote:

    var p1 = "hello";
    var p2 = "jon";
    var s = `${p1} ${p2}`;  // "hello john"

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 20, 2019 6:16 PM
  • User1493428334 posted

    Hi Sam,

    Thanks for your reply.

    You are right that "break" can't break out of "each" loop. 
    (However, I can't use "return" here because I still need to execute the remaining statements following the "each" loop)


    Best Regards,
    Golden

    Wednesday, November 20, 2019 11:04 PM
  • User1493428334 posted

    Hi Bruce,

    Your reply puts the great versatility of jQuery in great display!

    Yesterday I took the backquote as a single quote, othewise everything works according to what you said.

    Thanks so much for your great help,
    Golden

    Wednesday, November 20, 2019 11:16 PM