Grabing the anchor from the LI whose ID is same as the cell's ID

Question

Hi Guys,

I have below is the html code for TD which gets appended after matching the IDs from below LI HTML code

<td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
    border-bottom-style: solid" id="Communication">
    Communication Science Course
</td>

<li id="CommunicationTooltip"><a href="#" target="_blank" class="toolTip">
    <img src="/images/q_mark.gif" alt="" /><span style="width: 300px; padding: 10px 10px 10px 55px;">Testing
    Communication.</span></a> 
</li>

<td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
    border-bottom-style: solid" id="Communication_1">
    Communication Science Course II
</td>

<li id="Communication_1Tooltip"><a href="#" target="_blank" class="toolTip">
    <img src="/images/q_mark.gif" alt="" /><span style="width: 300px; padding: 10px 10px 10px 55px;">Testing
    Communication II.</span></a> 
</li>

Here is Jquery which matches the relative IDs and takes tag from above LI and further append in above TD

$(document).ready(function() 
{

        // bind to cells with an ID attribute
        $("table > tbody > tr > td[id]").each(function() 
        {                

            // grab the anchor from the LI whose ID starts with the cell's ID
            var $tooltip = $("div:hidden li[id^=" + $(this).attr("id") + "] a");

            //alert($tooltip);

            // append it to the current cell
            $(this).append($tooltip);

        });
});

if you see the above HTML code we have two different LI IDs (Communication and Communication_1),The issue is that it works fine if I use Communication1 as second ID, however when I use Communication_1 it appends the ANCHOR tag to Communication TD, if you check above Jquery it matches the LI IDs starting with same ID, However I want it that it should match perfect LI ID not starting with same ID.

Please amend the above Jquery code.

Thanks

Answer 1

I am not 100% sure of what you want to achieve, I can only guess the issue is you are using 'startwith' to match the IDs. Since the toolip ID is always "idOfTDTooltip", why not match them exactly?

var $tooltip = $("div:hidden li[id='" + $(this).attr("id") + "ToolTip'] a");

Alternatively, case-insensitive comparing of the ID with ID+'tooltip':

$(document).ready(function() {
    // bind to cells with an ID attribute
    $("table > tbody > tr > td[id]").each(function() 
    {                
        appendTooltip($(this), $(this).attr('id'));
    });
});

function appendTooltip(obj, theId) //find and append tooltip
{
  $("div:hidden li[id^='" + theId + "'] a").each(function(){
    if($(this).parent().attr('id').toLowerCase() === (theId + "tooltip").toLowerCase()) {
      obj.append($(this));
      return;
    }
  });
}