遍历 div 中的所有 div（包括 children）

Question

我让这个页面的静态版本在本地运行良好，但我公司使用的 CMS 在将其实施到 CMS 中时会吐出可怕的代码。

最初我试图循环遍历 div 中的所有 div 并构建一个包含结果的 select 框。

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

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

在第一级 divs 中使用简单的 for each 循环很好。

 $("#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 决定像这样包装 div，对此我无能为力。我正在尝试 return ID "Glasgow" 和 "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

您可以使用属性选择器简单地过滤 div，

$("#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的回答，你也可以这样做。

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

});

nth-child 允许您在 HTML 元素中 select 一个特定的子元素。它通常用于 CSS，但与 Javascript 完美配合使用。

详情请参考http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 3

根据你的HTML，如果符合以下假设

所需元素始终是 class 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>

遍历 div 中的所有 div（包括 children）

Looping through all divs in a div (including children)

html

javascript

each

jquery

loops