从LI中获取锚点,其ID与单元格的ID相同

时间:2010-03-02 09:24:50

标签: jquery

我在下面是TD的html代码,它匹配来自以下LI HTML代码

的ID后附加
<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>

以下是与相对 ID 匹配的Jquery,并从 LI 上方获取标记,并进一步追加到 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);

        });
});

如果你看到上面的HTML代码我们有两个不同的LI ID (Communication and Communication_1),问题是如果我使用 Communication1 作为第二个< strong> ID ,但是当我使用 Communication_1 时,它会将ANCHOR标记附加到通信 TD,如果您检查上面的Jquery,它会匹配以相同ID开头的LI ID ,但是我希望它能匹配完美的LI ID而不是以相同的ID开头。

请修改上面的Jquery代码。

由于

1 个答案:

答案 0 :(得分:1)

我不是100%肯定你想要实现的目标,我只能猜测问题是你使用'startwith'来匹配ID。由于工具箱ID总是“idOfTDTooltip”,为什么不完全匹配它们呢?

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

或者,对ID与ID +'工具提示'进行不区分大小写的比较:

$(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;
    }
  });
}