使用Jquery遍历列表

Question

我是一名完全不懂JavaScript的新手。

这里是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

将其设置为变量

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

如果li元素与变量匹配

停止循环并移动到下一个ul

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

将容器div的class设置为“hide”

这是我目前所做的...任何帮助都将不胜感激。

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

- user2859646

---

一个 jsfiddle 给你：http://jsfiddle.net/bhlaird/eWTRZ/ （不解决问题，只是帮助你说明你目前的问题）。 - Barbara Laird

我清理了JS代码，但希望它只是复制粘贴错误，而不是实际代码。如果是实际代码，我可能已经通过编辑修复了它。;-) - Brad Christie

@BradChristie实际上那是一个激进的编辑，你不应该改变代码 :)我将回滚。 - Ram

@LucasMaus：HTML5接受除空格以外的任何字符 ；-) - Brad Christie

你是对的，我以为我的编程模式是一种规则。 - Lucas Maus

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/

- Hive7

---

顺便提一下，应该使用.prop()来获取id。 - Brad Christie

你可以直接使用 this.id。 - PSL

@PSL：同意，this.id 更好（不要用 jQuery）。但如果你确实要使用它，应该使用 .prop。;-) - Brad Christie

Answer 2

你正在尝试做的一切在语法上都非常简单。你可以在许多地方找到有关要使用的方法的文档。你可以简单地使用JavaScript，但我假设你想使用jQuery。

在较高的层次上，您将想使用jQuery选择器获取所有UL对象，然后对于每个UL循环遍历所有LI子元素，例如：

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

    });
});

为了获得你要查找的数据，你可以使用jQuery方法，如addClass()、attr()等。

- Jack

Answer 3

您可以使用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/

- Irvin Dominin

Answer 4

您可以使用这个方法。在检查 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

的内容与编程有关。

- Optimus Prime

Answer 5

你也可以试试这个

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

例子。

- The Alpha

Answer 6

示例：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;}
        });
    });
}

- Techsin

---

我的天啊，大家好厉害。作为一个新手，我对stackoverflow社区的支持感到惊讶。谢谢大家的建议。我会尝试所有的解决方案，看看哪个最适合我。谢谢。 - user2859646