Fatal编程技术网
  • javascript/
  • Javascript 如何在循环过程中为无序列表中的每个li隐藏和检查另一个元素的属性？

Javascript 如何在循环过程中为无序列表中的每个li隐藏和检查另一个元素的属性？

javascript jquery

Javascript 如何在循环过程中为无序列表中的每个li隐藏和检查另一个元素的属性？,javascript,jquery,Javascript,Jquery,好的-我正在尝试通过无序列表中包含的反向循环。在这个循环过程中，我希望删除每个，然后将其父列的高度与相邻列的高度进行比较，直到它=

好的-我正在尝试通过无序列表中包含的
    • 反向循环。在这个循环过程中，我希望删除每个
    • ，然后将其父列的高度与相邻列的高度进行比较，直到它=<另一列。一旦这是真的，断开循环并显示剩余的
    • 。在此之前，我正在使用shuffle.js来洗牌列表。我已经能够捕捉到这两列的高度，但一旦我开始在
  • 中循环，我的代码似乎就乱七八糟了
    
这是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>

    

    
这是设置高度的列，该高度决定显示的[li]量

      

    • 
1.

      • 

    • 
2.

      • 

    • 
3.

      • 

    • 
4.

      • 

    • 
5.

      • 

    • 
6.

      • 

    • 
7.

      • 

    • 
8.

      • 

    • 
9

      • 

    • 
10

      • 

    • 
11

      • 

    • 
12

      • 

    

    


    
这是我到目前为止编写的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>

    

    
jQuery（函数（$）
{
window.onload=函数（）
{ 
$（“#shuffleunorderedlist”）.shuffle（）；/*********随机列表
};
var mainHeight=$（“#main”）.height（）；/*******捕获“main”高度
var sidebarHeight=$（“#sidebar”）.height（）；/*******捕获“sidebar”高度
如果（主高度>侧边栏高度）/*******比较“侧边栏”高度
{
var liCheck=$（'div#sidebar.li'）.reverse（）。每个（函数（）/**********通过
  • 反向循环
{
while（liCheck（））
{
$（'li'）.hide（）；/*********通过
  • 反向循环
如果（侧边栏高度=<主高度）
{
断开；//完全断开循环//*******剩余的输出
  • 
}
}  
}   
}               
});

    • 
那么基本上为什么这不起作用？我在哪里打破它？我如何才能让它起作用
    

    非常感谢您提供的任何建议、帮助和答案。
    您的代码中充满了问题，因此与其详细说明，不如将您的代码与以下内容进行比较：
    

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

    

    var mainHeight=$（'#main'）.height（）；
var sidebarHeight=$（'#sidebar'）.height（）；
如果（mainHeight主高度）{
$（this）.hide（）；//仅隐藏当前元素
边栏高度=$（“#边栏”）.height（）；//更新边栏高度
}
});
}

    如果你能把这段代码放到JS提琴中，就很难马上看到它。还有像
    liCheck（）
    这样的函数，我们甚至看不到它们在做什么，
    $（'li'）.hide（）
    将隐藏页面上的每个列表项。还有一件事：我没有看到
    mainHeight
    的任何更新，因此它将始终是初始值。好的-显然我需要返回并重新执行所有这些操作。感谢您的建议。