Question

我试图弄清楚jquery选择器在选择一组元素时如何工作。一旦我拥有了我试图迭代的所有元素，并检查它们的样式值，以找到哪一个，它似乎不起作用。我必须以不同方式迭代它们吗？感谢您的任何帮助。我试过搜索并弄乱它，这就是我现在所拥有的。

function toggle() {
    //get all the content divs
    var $all_divs = $('.content_div');

    //find the content div that is visable
    var $active_index = -1;
    for (i = 0; i < $all_divs.length(); i++) {
        if ($all_divs[i].style.display == "block") {
            $active_index = i;
        }
    }

    $all_divs[$active_index].style.display = "none";
}

编辑：

关于我的目标的更多信息。

基本上我有4个div，当我点击一个按钮时，我想要一个可见的按钮消失，然后列表中的下一个出现。

整个代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
.wrapper {
    width:450px;
    height:30px;
    position:relative;
}

.slide_button {
    width:25px;
    height:30px;
    position:absolute;
    top:0;
}

#left {
    left:0;
}

#right {
    left:425px;
}

.content_div {
    width:400px;
    height:30px;
    position:absolute;
    top:0;
    left:25px;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
function toggle() {
    var Divs = $('.content_div');
    var i;
    var index = 0;

    Divs.each(function(index) {
        if ($(this).css('display') == 'block')
            i = index;
        index++;
    });

    if(typeof i !== 'undefined'){
        Divs.eq(i).css('display', 'none');
    }
}
</script>


</head>

<body>
<div class="wrapper">
    <div class="slide_button" id="left">
        <center><a href='javascript:toggle();'><</a></center>
    </div>
    <div id='div1' class='content_div' style="display:block;">
        this is div 1
    </div>
    <div id='div2' class='content_div' style="display:none;">
        this is div 2
    </div>
    <div id='div3' class='content_div' style="display:none;">
        this is div 3
    </div>
    <div class="slide_button" id='right'>
        <center>></center>
    </div>
</div>
</body>
</html>

Answer 1

我认为您的代码无法正常工作的原因是在.length()循环条件中使用for。 jQuery对象没有.length()方法，它们具有.length属性。删除括号，您的代码应该可以正常工作。

编辑：要求您一次显示一个div，您可以执行以下操作：

$(document).ready(function() {
   var $divs = $("div.content_div").hide(),  // first hide all the divs
       i = 0;    
   $divs.eq(i).show();                       // then show the first

   $(".slide_button a").click(function() {        
       $divs.eq(i).hide();                   // on click hide the current div
       i = (i+1) % $divs.length;             // then update the index to
       $divs.eq(i).show();                   // show the next one
   });
});

演示：http://jsfiddle.net/7CcMh/

（原来答案的其余部分:) 您用来访问单个元素的语法是正确的：如果$all_divs是jQuery对象，那么$all_divs[0]是对jQuery对象中第一个DOM元素的引用。但是，jQuery提供了.each()方法来简化此过程：

$('.content_div').each(function() {
     // here 'this' is the current DOM element, so:
     if (this.style.display == "block")
         this.style.display = "none";
     // OR, to access the current element through jQuery methods:
     $(this).css("display", "none");
});

话虽如此，似乎你期望除了一个元素之外的所有元素都已被隐藏，你正在找到它并隐藏它。如果是这样，您可以在一行中实现：

 $('.content_div').hide();
 // OR
 $('.content_div').css("display", "none");

像.hide()和.css()这样的jQuery方法适用于他们被调用的jQuery对象中的所有元素。

Answer 2

您可以使用jQuery each()方法，让您遍历所选元素。

$('.content_div').each(functon(index){
    if ($(this).is(':visible')) { 
        $(this).hide()
    } 
})

如果要选择可见的div，可以使用:visible选择器：

选择所有可见的元素。

$('.content_div:visible').css('display', 'none'): // or $('.content_div:visible').hide()

<强>更新

您可以将一个类添加到锚点并尝试以下操作：

<center><a href='#' class="toggle">></a></center>

$('.toggle').click(function(e){
  e.preventDefault()  
  if ($('.content_div:visible').next('.content_div').length != 0) {    
     $('.content_div:visible').hide().next('.content_div:hidden:first').show()
  } else {
       $('.content_div').hide().eq(0).show()
  }    
})

Demo

Answer 3

使用JQuery中的标准each方法。

$('.content_div').each(function(index) {
    // do work with the given index
    if (this.style.display == "block") {
        this.style.display = "none";
    }
});

Answer 4

上次更改：

http://jsfiddle.net/6fPLp/13/

如何迭代jquery选择

4 个答案: