jQuery选择器和对象构建

时间:2015-05-19 02:16:39

标签: javascript jquery

我知道这可能已被提出,但需要你的帮助。我有6-9个节点需要创建相同类的jQuery对象数组的确切出现。这是html和javascript。



$(document).ready(function(){

  $element = $('.Grid--gutters');

  $miniStoryRow = $element.find('div[class*=js-ministory-row]');//This is not working

  //$miniStoryRow should contain 3(it can be 2 or 4 based on rows) objects 
  //which contain all element objects with the respective html
  //i.e. js-ministory-row0, js-ministory-row1, js-ministory-row2, js-ministory-row4

  $.each($miniStoryRow, function () {
    //should have 3 loops only based on html
  });
});

<div class="Grid Grid--gutters">
  <div class="Grid-col js-ministory-row0">
    <a href="#">
      <div class="Img-Wrapper">
        <img src="img/banner-one-shoes.png">
      </div>
    </a>
  </div>
  <div class="Grid-col js-ministory-row0">
    <a href="#">
      <div class="Img-Wrapper">
        <img src="img/banner-one-tab.png">
      </div>
    </a>
  </div>
  <div class="Grid-col js-ministory-row0">
    <a href="#">
      <div class="Img-Wrapper">
        <img src="img/banner-one-tab.png">
      </div>
    </a>
  </div>
  <div class="Grid-col js-ministory-row1">
    <a href="#">
      <div class="Img-Wrapper">
        <img src="img/banner-one-shoes.png">
      </div>
    </a>
  </div>
  <div class="Grid-col js-ministory-row1">
    <a href="#">
      <div class="Img-Wrapper">
        <img src="img/banner-one-tab.png">
      </div>
    </a>
  </div>
  <div class="Grid-col js-ministory-row1">
    <a href="#">
      <div class="Img-Wrapper">
        <img src="img/banner-one-shoes.png">
      </div>
    </a>
  </div>
  <div class="Grid-col js-ministory-row2">
    <a href="#">
      <img src="img/banner-two-phones.png">
    </a>
  </div>
  <div class="Grid-col js-ministory-row2">
    <a href="#">
      <img src="img/banner-one-tab.png">
    </a>
  </div>
</div>
&#13;
&#13;
&#13;

我正在寻找将特定类的对象分组。

提前致谢:)

2 个答案:

答案 0 :(得分:0)

$(document).ready(function(){

  $element = $('.Grid--gutters');
  $miniStoryRow = $element.find('div[class*=js-ministory-row]');
  var len = $miniStoryRow.length;
  var groups = len / 3;
  for (var i=0; i<groups; i++) {
    $eachGroup = $element.find('div[class*=js-ministory-row'+i+']');
    $.each($eachGroup , function () {
        //do sth 
    });
  }
});

这可以吗?

答案 1 :(得分:0)

请试试这个,

$miniStoryRow = $element.find('div[class^="js-ministory-row"]');