如何在循環中隱藏並檢查無序列表中每個li的另一個元素的屬性？

好吧 - 我試圖通過包含在無序列表中的<li>反向循環。在此循環中，我想刪除每個<li>，然後將其父列的高度與相鄰列的高度進行比較，直至其爲= <。一旦這是真的打破循環，並顯示剩餘<li>。在這之前，我正在使用shuffle.js來洗牌。我已經能夠捕捉到兩列的高度，但我的代碼似乎一旦我開始通過<li>如何在循環中隱藏並檢查無序列表中每個li的另一個元素的屬性？

這裏循環是HTML短版被搞砸了......

<body> 
    <div id="wrap"> 
     <div id="header"></div> 
      <div id="main">This is the column that would set the height that determines the amount of [li] shown 
      </div> 
     <div id="sidebar"> 
      <ul id="shuffleunorderedlist"> 
       <li id="promo_1"> 
        1 
       </li> 
       <li id="promo_2"> 
        2 
       </li> 
       <li id="promo_3"> 
        3 
       </li> 
       <li id="promo_4"> 
        4 
       </li> 
       <li id="promo_5"> 
        5 
       </li> 
       <li id="promo_6"> 
        6 
       </li> 
       <li id="promo_7"> 
        7 
       </li> 
       <li id="promo_8"> 
        8 
       </li> 
       <li id="promo_9"> 
        9 
       </li> 
       <li id="promo_10"> 
        10 
       </li> 
       <li id="promo_11"> 
        11 
       </li> 
       <li id="promo_12"> 
        12 
       </li> 

      </ul> 
     </div> 
<div id="footer"></div>

這裏是我寫到目前爲止的jQuery和Javascript。

<script type="text/javascript"> 
jQuery(function($) 
{ 
    window.onload = function() 
    { 
     $('#shuffleunorderedlist').shuffle(); //********** Shuffle List 
    }; 
    var mainHeight = $('#main').height(); //********** Capture 'main' height 
    var sidebarHeight = $('#sidebar').height();  //********** Capture 'sidebar'  height 
     if (mainHeight > sidebarHeight)  //********** Compare 'sidebar' height 
      { 
       var liCheck = $('div#sidebar.li').reverse().each(function() //********** reverse Loop through <li>'s 
        { 
        while(liCheck()) 
         { 
          $('li').hide(); //********** reverse Loop through <li>'s 
          if (sidebarHeight =< mainHeight) 
            { 
            break; // breaks loop completely //********** Output <li>'s that are left 
            } 
         } 
        } 
      }    
}); 
</script>

那麼基本上爲什麼這不工作？我在哪裏打破它？我怎樣才能使它工作？

任何建議，幫助和解答，非常感謝。

來源

2012-12-12 koolmikeski

如果你可以把這個代碼放到一個JS小提琴，一種很難立即看到，就在這裏。此外，還有像'liCheck（）'這樣的函數，我們甚至不能看到他們在做什麼 –

另外，'$（'li'）。hide（）'將隱藏頁面上的每個列表項。 – Shmiddty

還有一件事：我沒有看到'mainHeight'的任何更新，所以它始終是初始值。 – Shmiddty

你的代碼是千瘡百孔，所以不是細節他們，你的代碼比較這樣的：

var mainHeight = $('#main').height(); 
var sidebarHeight = $('#sidebar').height(); 
if (mainHeight < sidebarHeight) { // You are hiding things from the sidebar correct? Strictly speaking, this check isn't necessary, but it prevents us from looping when we don't need to. 
    $('div#sidebar li').each(function() { // I removed reverse as it gave me a reference error. If it is defined for you, feel free to use it. 
     if (sidebarHeight > mainHeight) { 
      $(this).hide(); // hide only the current element 
      sidebarHeight = $("#sidebar").height(); // update sidebarHeight 
     } 
    }); 
}

來源

2012-12-12 20:20:07 Shmiddty

好的 - 顯然我需要回去重做所有這些。感謝您的建議。 – koolmikeski

終於來測試這個，它工作謝謝shmiddty。 – koolmikeski

如何在循環中隱藏並檢查無序列表中每個li的另一個元素的屬性？

回答

相關問題