在一個div（包括兒童）中循環遍歷所有div

Question

我有這個頁面的靜態版本在本地運行良好，但我公司使用的CMS在實施到CMS時吐出了可怕的代碼。

最初我試圖通過div內的所有div循環，並用結果構建一個選擇框。

<div id="products-list"> 
    <div id="glasgow"> 
     <div class="product"> 
     <!--Content--> 
     </div> 
    </div> 

    <div id="edinburgh"> 
     <div class="product"> 
     <!--Content--> 
     </div> 
    </div> 
</div> 

對第一級div的每個循環使用一個簡單的罰款。

$("#products-list > div").each(function() { 
     if ($(this).attr("id") != undefined || $(this).attr("id") != null) { 
      $('#select-example').append($('<option>', { 
       value: $(this).attr("id"), 
       text: $(this).attr("id") 
      })); 
     } 
    }); 

但是，我的CMS決定像這樣包裝divs，並且我沒有太多可以做的事情。我試圖返回ID「格拉斯哥」和「Edinbugh」。

<div id="products-list"> 
    <div class="w-component-wrapper"> 
    <div> 
     <div class="w-component-content"> 
     <div id="glasgow"> 
      <div class="product"> 
      <!-- Content --> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

    <div class="w-component-wrapper"> 
    <div> 
     <div class="w-component-content"> 
     <div id="edinburgh"> 
      <div class="product"> 
      <!-- Content --> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

最有可能是小事，我只需要另一組眼睛。提前歡呼！

Answer 1

你可以簡單地通過使用屬性選擇過濾格，

$("#products-list div[id]").each(function() { 
 
    $('#select-example').append($('<option>', { 
 
    value: $(this).attr("id"), 
 
    text: $(this).attr("id") 
 
    })); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="products-list"> 
 
    <div class="w-component-wrapper"> 
 
    <div> 
 
     <div class="w-component-content"> 
 
     <div id="glasgow"> 
 
      <div class="product"> 
 
      <!-- Content --> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="w-component-wrapper"> 
 
    <div> 
 
     <div class="w-component-content"> 
 
     <div id="edinburgh"> 
 
      <div class="product"> 
 
      <!-- Content --> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<select id="select-example"></select>

Answer 2

除了Pranav的答案，你也可以做TI這樣的。

$("#products-list > div > div:nth-child(3)").each(function() { 
    $('#select-example').append($('<option>', { 
    value: $(this).attr("id"), 
    text: $(this).attr("id") 
    })); 

}); 

的nth-child允許您選擇一個HTML元素中一個特定的孩子。它通常在CSS中使用，但爲了這種目的，它與Javascript完美協作。

有關更多詳細信息，請參閱http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 3

基於你的HTML，如果符合以下假設

• 所需元素始終是一個元素與類product

父你可以這樣做。 （在瀏覽器控制檯輸出）

function getCityIds() { 
 
    var list = document.querySelectorAll('.product'), 
 
    list = Array.prototype.slice.call(list), 
 
    value = []; 
 

 
    list.forEach(function(elem) { 
 
    value.push(elem.parentNode.id); 
 
    }); 
 

 
    return value; 
 
} 
 

 
function appendOptions(element, options) { 
 
    options.forEach(function(elem) { 
 
    var option = document.createElement('option'); 
 
    option.value = elem; 
 
    option.text = elem; 
 
    element.appendChild(option); 
 
    }); 
 
} 
 

 
appendOptions(document.getElementById('example'), getCityIds());

<div id="products-list"> 
 
    <div class="w-component-wrapper"> 
 
    <div> 
 
     <div class="w-component-content"> 
 
     <div id="glasgow"> 
 
      <div class="product"> 
 
      <!-- Content --> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="w-component-wrapper"> 
 
    <div> 
 
     <div class="w-component-content"> 
 
     <div id="edinburgh"> 
 
      <div class="product"> 
 
      <!-- Content --> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<select id="example"></select>