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

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

这是一个有效的 fiddle :

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/