使用Jquery循環遍歷列表

Question

總js newb在這里。

這是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的類設置為'hide'

這是我到目前為止......任何幫助將不勝感激。

<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

你想要做的每件事都是非常簡單的語法。 您可以找到有關在許多地方使用的方法的文檔。 你可以簡單地使用javascript，但我假設你想使用jQuery

在高級別上，您將希望使用jQuery選擇器獲取所有UL對象，然后使用所有LI子級的每個UL循環，例如：

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

    });
});

要獲取您正在尋找的數據，您可以使用jQuery方法，如addClass（），attr（）等。

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/

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

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

例。

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;}
        });
    });
}