jQuery每个循环不从迭代中获取数据

时间：2014-02-05 07:05:34

标签： javascript jquery html loops

我正在使用的每个循环上发生一个奇怪的问题。请耐心等待，因为它在这里变得有点乱，但它是我必须使用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”类的项目下的无序列表中。出于某种原因，它只执行列表中的第一项。

我尝试了一些变化，并且能够让它在列表中显示多个条目，但它只抓取第一个实例（在这种情况下为“Bath Accessories”）并重复多次。我想我会在这里回到起点并开始一个新的。

3 个答案:

答案 0 :(得分：1)

.prev()只会让你的选择器前面的兄弟姐妹得到。可选地，它由参数给出的选择器进行过滤。但是，它不会搜索与参数中给出的选择器匹配的第一个前一个兄弟。

这就是为什么

if ($(this).prev('tr.noSub').hasClass(secondClass))

只评估true一次，因为只有在第一次迭代中，前面的兄弟才有secondClass。 请改用prevAll()，其行为符合您的要求：

if ($(this).prevAll('tr.noSub').hasClass(secondClass)) {
    var link_html = $(this).find('a').clone().wrap('<p>').parent().html();
    $(this).prevAll('tr.noSub').find('.td_nav_div ul').append('<li>' + link_html + '</li>');
}

（请参阅对http://api.jquery.com/prev/与http://api.jquery.com/prevAll/）

编辑：我已更新您的JSFidle用于演示目的：http://jsfiddle.net/uf4H6/1/

答案 1 :(得分：1)

这是你想要的结果吗？ enter image description here

只需将prev改为兄弟姐妹即可。 http://jsfiddle.net/fNDGB/ 

$('tr.hasSub').each(function () {
        var theClass = $(this).attr('class');
        var split = theClass.split(' ');
        var secondClass = split[1];
        if ($(this).siblings('tr.noSub').hasClass(secondClass)) {
            var link_html = $(this).find('a').clone().wrap('<p>').parent().html();
            $(this).siblings('tr.noSub').find('.td_nav_div ul').append('<li>' + link_html + '</li>');
        }
    });

答案 2 :(得分：1)

我最后采用了不同的方法。看着原始表的结构。我没有匹配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();
        }
    });
});
相关问题
最新问题