在单独的嵌套组

时间：2017-02-08 20:22:39

标签： javascript jquery

在处理如下所示的代码块时，我试图为类“duplicated-class”的每个实例添加一个唯一的类名，该类与“affiliate-logo”类在同一元素上。< / p>

重要说明：

  1. “duplicated-class”代表一个动态变量，可以是任何东西。
  2. 期望的结果是使用数字（'。class-1'，'。class-2'，'。class-3'等附加重复的类......

    3. 以下是代码结构的示例：

    <div id="integrations">
<div class="post-item" data-name="name">
    <div class="rss-card" style="">
        <div class="hs-rss-item">
            <div class="rss-item-banner">
                <img class="hs-rss-featured-image" src="" alt="">
                <div class="affiliate-logo duplicate-class"><img src="" alt=""></div>
            </div>
        </div>
    </div>
</div>

<div class="post-item" data-name="name">
    <div class="rss-card" style="">
        <div class="hs-rss-item">
            <div class="rss-item-banner">
                <img class="hs-rss-featured-image" src="" alt="">
                <div class="affiliate-logo duplicate-class"><img src="" alt=""></div>
            </div>
        </div>
    </div>
</div>
<div class="post-item" data-name="name">
    <div class="rss-card" style="">
        <div class="hs-rss-item">
            <div class="rss-item-banner">
                <img class="hs-rss-featured-image" src="" alt="">
                <div class="affiliate-logo different-class"><img src="" alt=""></div>
            </div>
        </div>
    </div>
</div>
</div>

    正在从COS列表中生成post-item组，其中“重复类”从必须允许重复值条目的{{name}}值中提取。

    虽然我可以找到为包装ID的直接后代生成类列表的方法，但我似乎无法找到（或弄清楚）产生查找“重复类”结果的任何内容，而在生成时更深入地嵌套结构

    我最初的想法是：

    1. 确定post-item群组
    2. 在每个post-item群组中找到'.affiliate-logo'类
    3. 确定'.affiliate-logo'旁边的第二个类（在此示例中为.duplicate-class）并将其分配给变量（var = adjacentClass）＆lt; - 这就是我迷失的地方如何完成这项检查。
    4. 检查（adjacentClass）是否与其他post-item组中的任何其他（adjacentClass）匹配。
    5. 使用计数器作为唯一标识符添加（var i = i）
    6. if(adjacentClass === adjacentClass){ $(".duplicate-class').replaceClass('adjacentClass' + i) } else {}

      7. （如果我能找出第3步，我会尝试在javascript中编写该逻辑。）

      非常感谢为此问题提供的任何帮助。

      我在尝试寻找解决方案时引用的文章：

      How find nested div with same class name in jquery?

      How do I access the list of classnames using javascript/jQuery?

      jquery select class inside parent div

      Target the 2nd instance of a CSS Class

      **编辑修复术语冲突

1 个答案:

答案 0 :(得分：0)

更新2

在代码段2中，我们使用了.each()两次。一次迭代每div.affiliate-logo次，每次div.affiliate-logo都有一次。 for循环过滤掉存储在数组中的重复项。最困难的部分是OP在获得第二堂课时遇到的麻烦。这是如何：

$(this).prop('classList');

在纯JavaScript中，classList是一个属性，当它在没有任何.add，.remove等的情况下使用时，它将返回一个classNames数组（在Snippet 2的注释中，任何对这个数组中的字符串的引用将是“classString”）。

在完整页面模式下查看代码段2。详细信息在代码段2中进行了注释。

更新1

  

第一个'duplicate-class'变成'duplicate-class-1'，第二个变成'duplicate-class-2'

不确定你要做什么。我认为你认为类就像元素一样是DOM对象。查看代码段并告诉我这是否是您想要的。

SNIPPET 1 

$('.duplicate-class').each(function(idx, obj) {
  var unique = 'duplicate-class' + (idx + 1);
  $(this).addClass(unique)
  $(this).text('this is ' + unique); //This is just to show it works
});
div {
  border: 1px solid black;
  height: 40px;
  width: 200px;
  padding: 10px;
  color: white;
  background: rgba(0, 0, 0, .3);
}
.affiliate-logo {
  border: 2px dashed red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="integrations">
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo duplicate-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo duplicate-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo different-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SNIPPET 2 

// .each() .affiliate-logo do this...
$('.affiliate-logo').each(function(idx, obj) {

  /* Get the classList .prop()erty and store it
  || in a var called list. list is now an array
  || of classes that belong to this particular
  || .affiliate-logo.
  */
  var list = $(this).prop('classList');

  // Store the second classString in a var called second
  var second = list[1];

  /* Create an array with the classString of 'affiliate-  
  || logo' because we already know that it will be a
  || duplicate. Call this array dupes.
  */
  var dupes = ['affiliate-logo'];

  /* for every classString that's in dupes array
  || compare it to the value of second. If there's
  || a match bust out of this loop and go on to the
  || next .affiliate-logo.
  */
  for (let a = 0; a < dupes.length; a++) {
    if (second === dupes[a]) {
      return;
    }
  }

  /* Since there were no matches, we continue.
  || Push second in the dupes array so if ever found 
  || again, second will be rejected by the previous
  || for loop.
  */
  dupes.push(second);

  /* Concat second with a dot so it'll pass as a class
  || selector then store it in a var called klass.
  */
  var klass = '.' + second;

  // each() klass will...
  $(klass).each(function(index, item) {

    /* concat second + (current)index as a string 
    || then addClass() that string to the current 
    || div.affiliate-logo.{{klass}}
    */
    $(item).addClass(second + index);

    /* insert text that shows it's new class. The
    || new unique class can be verified by F12.
    */
    $(item).text('This is ' + second + index);
  });

});
div {
  border: 1px solid black;
  height: 40px;
  width: 200px;
  padding: 10px;
  color: white;
  background: rgba(0, 0, 0, .3);
}
.affiliate-logo {
  border: 2px dashed red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="integrations">
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo duplicate-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo duplicate-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo different-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo o-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo x-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo klass-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo a-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo dupe-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo bass-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo wrong-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo no-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo no-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo x-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo logo-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo long-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo x-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo duplicate-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo x-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo no-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" data-name="name">
    <div class="rss-card" style="">
      <div class="hs-rss-item">
        <div class="rss-item-banner">
          <img class="hs-rss-featured-image" src="" alt="">
          <div class="affiliate-logo no-class">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题