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决定将这样的div包装起来，而且我无能为力。我试图归还ID＆＃34; Glasgow＆＃34;和＆＃34; Edinbugh＆＃34;。

<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

＆＃13;

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

＆＃13;

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

＆＃13;

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元素中的特定子项。它通常用于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>

循环遍历div（包括孩子）中的所有div

3 个答案: