0

Using the common 'if ID exist' method found here, is it still possible check for the existence of the ID when concating the ID with an array variable like below?

for (var i=0; i < lineData.length; i++)
{
    optionData = lineData[i].split(",");
    if ($("#" + optionData[0]).length)
    {
        $("#" + optionData[0]).text(optionData[1]);
    }
}

When running this in debugging, if the concated $("#" + optionData[0]) ID doesn't exist it yeilds a result of 'undefined: undefined' and jumps to:

Sizzle.error = function( msg ) {
throw "Syntax error, unrecognized expression: " + msg;

in the JQuery code.

Is it proper code etiquette to use check for, and set, HTML ID's in this manner? Why does this not work in the popular 'exist' method? What can I do to fix it and make it skip ID's that don't exist using this type of ID concatenation with an array string?

Community
  • 1
  • 1
Nimjox
  • 1,271
  • 5
  • 18
  • 33
  • 1
    what is optionData[0]? seems like this is not a string and hence a syntax error is thrown – Alex Apr 03 '14 at 17:36
  • optionData[0] is a string with four letters in it. Sorry I can't show too much more than that with out getting too deep in code, but in debugger the four letter strings do show up as such. – Nimjox Apr 03 '14 at 17:41
  • are you sure? because the code seems perfectly fine. try adding a var before optionData = lineData[i].split(","); – Alex Apr 03 '14 at 17:43
  • `optionData[1]` might be undefined. that won't throw an error anyway i guess.. – T J Apr 03 '14 at 17:48
  • If I do an alert(typeof optionData[0]) I always get a string, even before the 'undefined' variable error. I can clearly see that data in the optionData array is valid string data as well. Any other ideas how I can test this array to see what might be causing it to throw the error? – Nimjox Apr 03 '14 at 19:28
  • Okay if the ID='abcd' doesn't exist and optionData[0]='abcd' when I hit the if statement line I will see $("#" + optionData[0])='undefined: undefined' but if I change it in the debugger to the same thing, i.e. optionData[0]='abcd' it goes from undefined to 0. In my books abcd==abcd so there's some hidden data or escape char's in there. – Nimjox Apr 03 '14 at 19:36
  • I confirmed doing alert(optionData[0].length) some data is of length 4 and some 5. Thanks for the answers! – Nimjox Apr 03 '14 at 19:44

2 Answers2

1

http://jsfiddle.net/P824r/ works fine, so the problem is not where you think it is. Simplify your code and add in some checks. You're also not doing anything that requires jQuery, so I don't see how this is a jQuery question, but fine:

function handler(data, i) {
    var optionData = data.split(","),
        $element;
    if (optionData[0] && optionData[1]) {
      $element = $("#" + optionData[0]);
      if ($element.length > 0) {
        // omitting >0 as 'trick' causes JS coercion from number to boolean.
        // there's literally no reason to ever do so: it's both slower and
        // hides your intention to others reading your code
        $element.text(optionData[1]);
      }
    } else { console.error("unexpected optionData:", optionData);
}
lineData.forEach(handler);

but we can do this without jQuery, since we're not really using for anything that we can't already do with plain JS, in the same number of calls:

function handler(data) {
    var optionData = data.split(",");
    if (optionData.length === 2) {
      var id = optionData[0],
          content = optionData[1],
          element = document.getElementById(id);
          // because remember: ids are unique, we either get 0
          // or 1 result. always. jQuery makes no sense here.
      if (element) {
        element.textContent = content;
      }
    } else { console.error("unexpected input:", optionData);
}
lineData.forEach(handler);

(the non-jquery version unpacks the optionsData into separate variables for improved legibility, but the ultimate legibility would be to make sure lineData doesn't contain strings, but just contains correctly keyed objects to begin with, so we can do a forEach(function(data) { ... use data.id and data.content straight up ... }))

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • I don't see how this is an "ANSWER" for the question. this is some sort of suggestion or update that should go as a comment. – T J Apr 03 '14 at 18:49
  • it's also way longer than what a comment allows. Answers on SO are not just "answers". They can also be suggestions to get you on the right track. The problem wasn't with what mimjox thought it was, and he explicitly asked about html/css/etc ettiquette. This provides part of that secondary request. – Mike 'Pomax' Kamermans Apr 03 '14 at 20:15
1

If you want to keep this jQuery-related, there's more "syntax sugar" you're not making use of:

// check for ID in array
jQuery.each(someArray,
    function(index, value) {
        var the_id = $(value).attr('id');
        if ( the_id !== undefined && the_id !== false ) {
            // This item has an id
        }
});
John
  • 417
  • 2
  • 6