javascript - jQuery Each Loop不从迭代中获取数据

我正在使用的每个循环中发生一个奇怪的问题。忍受我，因为它在这里有点混乱，但是我必须使用jQuery来处理它的代码，因为它是我无法编辑的更大框架的一部分。

我将代码放在JSFiddle中，以免将代码全部放在这里。小提琴在这里：

http://jsfiddle.net/uf4H6/

我正在使用的jQuery是：

$(document).ready(function () {
      $('#display_menu_1 tr.noSub').each(function () {
          $(this).css({
              'position': 'relative'
          });
          var this_title = $(this).find('a').text();
          $(this).find('td.nav').append('<div class="td_nav_div"><ul><li><h3>' + this_title + '</h3></li></ul></div>');
          $('tr.hasSub').each(function () {
              var theClass = $(this).attr('class');
              var split = theClass.split(' ');
              var secondClass = split[1];
              if ($(this).prev('tr.noSub').hasClass(secondClass)) {
                  var link_html = $(this).find('a').clone().wrap('<p>').parent().html();
                  $(this).prev('tr.noSub').find('.td_nav_div ul').append('<li>' + link_html + '</li>');
              }
          });
      });
  });

我在其中遍历一些信息并将其放置在代码的不同部分的地方。 HTML是：

<div id="display_menu_1">
<table cellpadding="0" cellspacing="0" border="0" class="nav">
<tbody>
    <tr class="noSub bath-safety">
        <td class="nav" onmouseover="mOvr1(this);" onmouseout="mOut1(this);" onclick="mClk1(this);">
                <a href="/Bath-Safety-Products-s/26.htm" title="Bath Safety Products">Bath Safety</a>
        </td>
    </tr>
        <tr class="hasSub bath-safety"><td class="nav subnav" onmouseover="mSubOvr1(this);" onmouseout="mSubOut1(this);" onclick="mSubClk1(this);">
        <a href="/Bathroom-Safety-Accessories-s/565.htm" title="Bathroom Safety Accessories">Bath Accessories</a><span class="a7">&nbsp;</span>
        </td></tr>
        <tr class="hasSub bath-safety"><td class="nav subnav" onmouseover="mSubOvr1(this);" onmouseout="mSubOut1(this);" onclick="mSubClk1(this);">
        <a href="/Bathtub-lifts-s/373.htm" title="Bathtub lifts">Bath Lifts</a><span class="a7">&nbsp;</span>
        </td></tr>
        <tr class="hasSub bath-safety"><td class="nav subnav" onmouseover="mSubOvr1(this);" onmouseout="mSubOut1(this);" onclick="mSubClk1(this);">
        <a href="/Bath-Shower-Aids-s/100.htm" title="Bath &amp; Shower Aids">Bath &amp; Shower Aids</a><span class="a7">&nbsp;</span>
        </td></tr>
        <tr class="hasSub bath-safety"><td class="nav subnav" onmouseover="mSubOvr1(this);" onmouseout="mSubOut1(this);" onclick="mSubClk1(this);">
        <a href="/Commodes-s/43.htm" title="Commodes">Commodes</a><span class="a7">&nbsp;</span>
        </td></tr>
        <tr class="hasSub bath-safety"><td class="nav subnav" onmouseover="mSubOvr1(this);" onmouseout="mSubOut1(this);" onclick="mSubClk1(this);">
        <a href="/PVC-Shower-Chairs-Commodes-s/566.htm" title="PVC Shower Chairs | Commodes">PVC Shower Chairs / Commodes</a><span class="a7">&nbsp;</span>
        </td></tr>
        <tr class="hasSub bath-safety"><td class="nav subnav" onmouseover="mSubOvr1(this);" onmouseout="mSubOut1(this);" onclick="mSubClk1(this);">
        <a href="/Raised-Toilet-Seats-s/37.htm" title="Raised Toilet Seats">Raised Toilet Seats - Toilet Rails</a><span class="a7">&nbsp;</span>
        </td></tr>
        <tr class="hasSub bath-safety"><td class="nav subnav" onmouseover="mSubOvr1(this);" onmouseout="mSubOut1(this);" onclick="mSubClk1(this);">
        <a href="/Shower-Chairs-s/40.htm" title="Shower Chairs">Shower Chairs</a><span class="a7">&nbsp;</span>
        </td></tr>
        <tr class="hasSub bath-safety"><td class="nav subnav" onmouseover="mSubOvr1(this);" onmouseout="mSubOut1(this);" onclick="mSubClk1(this);">
        <a href="/Shower-Wheelchairs-s/39.htm" title="Shower Wheelchairs">Shower Commode Wheelchairs</a><span class="a7">&nbsp;</span>
        </td></tr>
        <tr class="hasSub bath-safety"><td class="nav subnav" onmouseover="mSubOvr1(this);" onmouseout="mSubOut1(this);" onclick="mSubClk1(this);">
        <a href="/Tilt-in-Space-Shower-Chairs-s/4583.htm" title="Tilt in Space Shower Chairs">Tilt in Space Shower Chairs</a><span class="a7">&nbsp;</span>
        </td></tr>
        <tr class="hasSub bath-safety"><td class="nav subnav" onmouseover="mSubOvr1(this);" onmouseout="mSubOut1(this);" onclick="mSubClk1(this);">
        <a href="/Bath-Transfer-Bench-s/41.htm" title="Bath Transfer Bench">Transfer Benches</a><span class="a7">&nbsp;</span>
        </td></tr>
</tbody>
</table>
            </div>

（对不起格式；在小提琴中更容易看到）。

您会看到我正在尝试遍历所有带有“ hasSub”的项目，并将其中的一些HTML放在具有“ noSub”类的项目下的无序列表中。由于某种原因，它只执行列表中的第一项。

我尝试了一些变体，并且能够使其在列表上显示多个条目，但它仅捕获了第一个实例（在本例中为“浴室配件”），并重复了很多次。我以为我会回到这里开始并重新开始。

最佳答案

我最终采用了另一种方法。看一下原始表的结构。我没有匹配noSub / hasSub行的CSS类，而是遍历了所有行，将noSub行另存为特殊行，并向其中添加了一个<ul>列表。对于该noSub行之后的所有其他行，我克隆了链接并将其添加到先前的<ul>中。

可以在http://jsfiddle.net/uf4H6/10/中找到带有注释的演示，它更接近您想要的内容。

$(document).ready(function () {
    // Introduce a variable that will hold a jQuery object referencing the <ul> we want to add to.
    var lastList = null;

    $('#display_menu_1 tr').each(function () {
        var currentRow = $(this);

        if (currentRow.hasClass('noSub')) {
            // Get the designated title
            var link = currentRow.find('a');

            // Add the list structure to our noSub row, with appropriate title
            currentRow.find('td.nav').append('<div class="td_nav_div"><h3>' + link.text() + '</h3><ul></ul></div>');

            // Save list
            lastList = $('ul', currentRow);

            // Optional cleanup: Remove original link
            link.remove();
        }
        else if (currentRow.hasClass('hasSub')) {
            // Safety mechanism in case our table doesn't start with a noSub row
            if (!lastList) {
                //throw new Error('Unsupported format in original document.');
                return true;
            }

            // Clone the link
            var linkClone = currentRow.find('a').clone();

            // Append it as a list item to the parent list
            lastList.append(linkClone.wrap('<li></li>').parent());

            // Optional cleanup: Remove original row
            currentRow.remove();
        }
    });
});