Javascript 使用Jquery循环遍历列表

总js新手在这里

这是HTML

<a href="#" class="dur" id="8.5">Size 8.5</a>
 <div class="product1">
 <ul class="sizeAvail" style="display:none;">   
  <li>8</li>    
  <li>8.5</li>  
  <li>9</li>    
  <li>9.5</li>  
  <li>10</li>
 </ul>
 </div>
 <div class="product2">
 <ul class="sizeAvail" style="display:none;">   
  <li>8</li>    
  <li>8.5</li>  
  <li>9</li>    
  <li>9.5</li>  
 </ul>
 </div>

8
8.5
9
9.5
十,


8
8.5
9
9.5

这是我需要的“逻辑”

当用户单击链接时

捕获该元素的id

将其设置为变量

对所有具有“sizeAvail”类的ul循环li

如果li元素与变量匹配

停止循环，转到下一个ul

如果ul没有与变量匹配的li

将容器div的类设置为“隐藏”

这就是我目前所处的位置…任何帮助都将不胜感激

<script type = "text/javascript" > $(document).ready(
 $(".dur").click(function () {
 var clickedSize = $(this).attr("id");
 $(".sizeAvail").each(function (li,+) {
    alert($(this).text());
 });
}); 
</script>

$（文档）。准备好了吗(
$（“.dur”）。单击（函数（）{
var clickedSize=$（this.attr（“id”）；
$（“.sizeAvail”）。每个（函数（li，+）{
警报（$（this.text（））；
});
}); 

您尝试执行的所有操作都非常简单。您可以在许多地方找到有关要使用的方法的文档。您可以简单地使用javascript来实现这一点，但我假设您想要使用jQuery

在较高级别上，您需要使用jQuery选择器获取所有UL对象，然后针对所有LI子项上的每个UL循环，例如：

$('ul').each(function() {
    $(this).find('li').each(function(){

    });
});

---

要获取您要查找的数据，可以使用jQuery方法，如addClass（）、attr（）等。

这里是一个实用工具：

以下是我使用的jquery：

$(".dur").click(function () {
    var clickedSize = this.id;
    $(".sizeAvail li").each(function () {
        if($(this).text() == clickedSize) {
            $(this).parent().show();
        } else {
            $(this).hide();
        }
    });
});

您当前所做的是不正确的，因为您没有通过.sizeAvail的子级进行循环，因为您没有直接声明，尽管您所声明的内容没有像jquery的大多数方面那样包含在引号中

如果这仍然不起作用，请确保您有一个jquery库

或者您可以使用纯js选项：

var $items = document.getElementsByClassName('sizeAvail');
var $dur = document.getElementsByClassName('dur');
for (i = 0; i < $dur.length; i++) {
    $dur[i].addEventListener('click', durClick);
}

function durClick() {
    var clickedSize = this.id;
    for (i = 0; i < $items.length; i++) {
        var $liElems = $items[i].getElementsByTagName('li');
        for (i = 0; i < $liElems.length; i++) {
            if ($liElems[i].innerHTML == clickedSize) {
                $liElems[i].parentNode.style.display = 'block';
                $liElems[i].style.display = 'block';
            } else {
                $liElems[i].style.display = 'none';
            }
        }
    }
}

var$items=document.getElementsByClassName（'sizeAvail'）；
var$dur=document.getElementsByClassName（'dur'）；
对于（i=0；i<$dur.length；i++）{
$dur[i].addEventListener（'click'，durClick）；
}
函数durClick（）{
var clickedSize=this.id；
对于（i=0；i<$items.length；i++）{
var$liElems=$items[i].getElementsByTagName（'li'）；
对于（i=0；i<$liElems.length；i++）{
如果（$liElems[i].innerHTML==clickedSize）{
$liElems[i].parentNode.style.display='block'；
$liElems[i].style.display='block'；
}否则{
$liElems[i].style.display='none'；
}
}
}
}

---

您可以使用

非

、

具有

和

包含

选择器的组合来获取匹配的元素，并使用

添加类

在其上设置类

参考：

代码：

---

演示：

您可以使用此选项。在检查div的所有li时设置一个标志。如果没有一个li的值与id相同，则在末尾隐藏div

  $(document).ready(function(){
    $(".dur").click(function () {
      var clickedSize = this.id;
      $(".sizeAvail").each(function(){
          var hide = 1;
          $(this).children('li').each(function(){
            if(clickedSize == $(this).text()) hide=0;
          });
          if(hide){
              $(this).closest('div').hide(); //Or $(this).parent().hide();
          }
      });
    }); 
  });

您也可以试试这个

$('a.dur').on('click', function(e){
    e.preventDefault();
    var id = this.id;
    $('ul.sizeAvail li').each(function(){
        if($(this).text() == id) $(this).closest('ul').addClass('hide');
    });
});

演示：

这是一种方法，就像你刚才做的那样。然而，我个人不喜欢把html和数据混在一起。但在某些情况下，这可能是一个不错的选择，但我不喜欢

您也不能给id一个以数字开头的值

var products= $("div[class^='product']"),
    dur =$('.dur');

dur.click(change);
function change(){
   var size= $(this).data('size');
    products.each(function(){
        var d = $(this);
        d.find('.sizeAvail>li').each(function(){
            d.hide(); 
            if($(this).text()==size) { d.show(); return false;}
        });
    });
}

---

如果发生了什么情况，您应该将函数传递给

.ready（）

方法。并且

+

不是有效的标识符。您不应该在id值上添加“.”。请尝试使用data id=“8.5”或data size=“8.5”，并使用jquery.data（'id'）或.data（'size'）访问它。JSFIDLE为您提供：（没有解决任何问题，只是帮助你说明你当前的问题）。@LucasMaus:HTML5接受；-）作为旁白，应该使用

.prop（）

作为id。你可以只做

这个.id

@PSL:同意，

这个.id

会更好（不要使用jQuery）。但是如果你真的要使用它，它应该是

.prop

；-）我的天哪，伙计们。作为js的新手，我对stackoverflow社区的支持度感到惊讶。谢谢大家的意见。我将尝试所有的解决方案，看看哪一个最适合我。非常感谢。

var products= $("div[class^='product']"),
    dur =$('.dur');

dur.click(change);
function change(){
   var size= $(this).data('size');
    products.each(function(){
        var d = $(this);
        d.find('.sizeAvail>li').each(function(){
            d.hide(); 
            if($(this).text()==size) { d.show(); return false;}
        });
    });
}