javascript - 使用 Jquery 循环遍历列表

Question

总 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>

这是我需要的“逻辑”......

当用户点击链接时

捕获该元素的 id

将其设置为变量

循环遍历所有具有“sizeAvail”类的 ul

如果 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>

Answer 1

这是一个工作小提琴：

http://jsfiddle.net/Hive7/uZTYf/

这是我使用的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';
            }
        }
    }
}

http://jsfiddle.net/Hive7/uZTYf/2/

Answer 2

你也可以试试这个

$('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');
    });
});

例子。

Answer 3

你可以用这个。检查 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();
          }
      });
    }); 
  });

JSFIDDLE

Answer 4

演示：http: //jsfiddle.net/QyKsb/

正如您所做的那样，这是一种方法。但是，我个人不喜欢将 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;}
        });
    });
}

Answer 5

您尝试做的所有事情在语法上都非常简单。您可以在许多地方找到有关使用方法的文档。你可以简单地使用 javascript，但我假设你想使用 jQuery

在高层次上，您将希望使用 jQuery 选择器来获取所有 UL 对象，然后为每个 UL 循环遍历所有 LI 子对象，例如：

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

    });
});

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

Answer 6

您可以使用not,has和contains选择器的组合来获取匹配的元素并使用addClass.

参考：

http://api.jquery.com/not-selector/

http://api.jquery.com/has-selector/

http://api.jquery.com/contains-selector/

http://api.jquery.com/addClass/

代码：

$(".dur").click(function () {
    $(".sizeAvail:not(:has(li:contains('"+$(this).prop("id")+"')))").addClass('hide')
});

演示：http: //jsfiddle.net/IrvinDominin/t8eMD/