javascript - 将标识符添加到单独嵌套组中的重复类-6ren

javascript - 将标识符添加到单独嵌套组中的重复类

转载作者：行者123 更新时间：2023-11-28 05:01:13

在使用如下代码块时，我尝试向“duplicate-class”类的每个实例添加唯一的类名，该类与“affiliate-logo”类位于同一元素上。

重要说明:

“duplicated-class”代表一个动态变量，可以是任何东西。
期望的结果是在重复的类后面附加一个数字(“.class-1”、“.class-2”、“.class-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>

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

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

我最初的想法是:

识别后项组
在每个 post-item 组中查找“.affiliate-logo”类
识别“.affiliate-logo”旁边的第二个类(在此示例中:.duplicate-class)并将其分配给变量 (var = approximationClass) <-- 这就是我对如何完成这项检查感到困惑的地方。
检查 (adjacentClass) 是否与其他 post-item 组中的任何其他 (adjacentClass) 匹配。
使用计数器充当唯一标识符添加 (var i = i)
if(adjacentClass ===adjacentClass){ $(".duplicate-class').replaceClass('adjacentClass' + i) } else {}

(如果我能弄清楚步骤 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

** 进行编辑以修复术语冲突

最佳答案

更新2

在代码片段 2 中，我们使用了 .each() 两次。一次迭代每个 div.affiliate-logo，一次迭代每个 div.affiliate-logo 的第二个类。 for 循环会过滤掉存储在数组中的重复项。最困难的部分是OP遇到的麻烦是获得二等舱。方法如下:

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

在纯 JavaScript 中，classList 是一个属性，当它不带任何 .add、.remove 等使用时，它将返回一个数组classNames(在片段 2 的注释中，对此数组中的任何字符串的引用都将是“classString”)。

在全页模式下查看片段 2。详细信息请参见代码片段 2。

更新1

the first 'duplicate-class' becomes 'duplicate-class-1', the second becomes 'duplicate-class-2'

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

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

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

关于javascript - 将标识符添加到单独嵌套组中的重复类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42122876/

文章推荐： javascript - 没有jquery的视差淡入淡出

文章推荐： html - JavaScript 无法调用内容脚本 JS 函数

文章推荐： css - Wordpress (Genesis) 小部件列未正确显示

文章推荐： javascript - 如何在 dojo 中使用正则表达式获取元素 ID

java - 如何反转字符串中的每个单词(单独)？
Java 专家需要您的帮助。今天我在一次采访中被问到这个问题，但我无法解决。所以我需要一个解决方案来解决这个问题；反转字符串 Input : Hello, World! Output : oll
javascript - 将项目添加到数组中 - 单独
目标:单击按钮并将成分作为单独的项目添加到数组中。当前设置: 这给出:蓝莓芒果柠檬汁然后我希望能够通过单击按钮将成分作为单独的项目添加到数组中: var allI
javascript - 正则表达式匹配双引号内的单引号(单独)？
如何编写正则表达式来匹配它(参见箭头): "this is a ->'' this is a "test' there is another "test' 第二种情况 /\b'/ Regex Demo
javascript - 从数组中删除所有项目(单独)
我有一个数组，其中包含有限数量的项目。我想随机删除项目，直到所有项目都被使用过一次。示例 [1,2,3,4,5] 使用了随机数 5，所以我不想再这样了。使用了随机数 2，所以我不想再这样了。等等..
android - 单独/小组开发人员如何在多个设备上进行测试？
首先，抱歉，如果这太主观了，我只是不知道还能怎么问/去哪里问。无论如何，鉴于我最近的所有问题，我准备很快发布一个 Android 应用程序，并且大部分测试都是在我的手机 Droid 上完成的。我真的
delphi - 单独 .pas 文件中的字符串
这可能不是这个问题的正确位置，如果不合适请随意移动它。我标记为 Delphi/Pascal 因为这是我在 atm 中工作的内容，但这可能适用于我猜的所有编程。无论如何，我正在做一些代码清理，并考虑将
javascript - 单独(组织)快速路线
我像这样分隔了其余 api 的路由。有没有更好的方法来组织路由器？还是我现在的做法没问题？ app.js app.use('/api/auth',auth); 应用程序/ Controller /au
excel - 单独 Excel 工作表中特定数据的总和
我在 2 个单独的工作表中包含以下数据: 表1: A B C D a ff dd ff ee b 12 10 10 12 表2: A B C
jquery - 单独 HTML 文件中的可单击行可在新选项卡中打开不同的链接
我正在使用 jQuery，并在位于单独 HTML 文件中的表中获取了几行。单击时，每一行都会成功重定向到本地 HTML 文件。 (使用window.location) 我想要实现的目标我想要完成的是
html - 单独
的重叠背景图像会产生比它们本身更暗的阴影
我有重叠背景图像的问题，当它们重叠时会导致阴影比不重叠时更暗，从而产生不均匀的阴影。我有一个高度灵活的盒子，带有一些透明的背景图像和阴影以创建漂亮的边框。盒子本质上是 3 个元素。您可以在此处找到
c# - 单独 git 存储库中的服务结构项目
按照正常的微服务框架，我们希望将每个微服务放入其自己的 git 存储库中，然后为 Service Fabric 项目创建一个存储库。当我们更新其中一个微服务时，Service Fabric 项目将仅重
html - 单独 html 的多个包含
我想将多个片段嵌入到一个指令中。这是我的设置方式。 Everyone Development (3)
linux - 单独 Gzip 多个文件并保留原始文件
我希望在保留原件的同时将多个文件 gzip 到一个目录中(到多个 .gz 文件中)。我可以使用这些命令来处理单个文件: find . -type f -name "*cache.html" -exe
performance - 我如何知道 Eclipse 插件使用了多少内存(单独)
有没有办法分别知道每个 Eclipse 插件消耗了多少内存？最佳答案进行堆转储并使用例如分析它Eclipse Memory Analyser . 如需更多信息，请参阅 Analyzing Equi
gradle - Gradle-单独(其他)git存储库中DSL的通用部分
我们使用cusrom插件并以这种方式定义脚本(这是一个近似的伪代码): //It is common part for every script (1) environments { "env1"
单独 Dll 中的 Signalr Hub
我在控制台应用程序中托管了一个集线器，并有一个 WPF 应用程序连接到它。它工作得很好。然后我将集线器移到一个单独的项目中，并将主机的引用添加到新项目中。现在我收到 500 错误，没有其他详细信息。
单独 JAR 文件中的 JavaBeans 类
是否可以在单独的 JAR 文件中为 JavaBean 构建类？具体来说，JavaBean 在一个 JAR 文件中具有 Bean 和 BeanInfo 类，而自定义属性编辑器类位于另一个 JAR 文件中
C#、MAF、单独 AppDomain 中的未处理异常管理
好的，所以我有一个 MAF 应用程序，它在单独的应用程序域中加载每个插件。这非常适合我的需要，因为它允许我在运行时动态卸载和重新加载我的插件。问题是，我需要能够在子应用域中处理未处理的异常，捕获它，
mysql - SQL - 在另一个表上查找至少两个不同/单独/不同的值
在参加在线数据库类(class)(针对初学者)时，我注意到一个问题，我必须查找涉及...至少两个不同值的查询...例如， ELMASRI 书中的 COMPANY 数据库指出:查找至少从事两个不同项目的
css - 单独 div 中两行图像之间的空间，仅出现在一个特定行上
(首先:我已经尝试了涉及边距、边框等的所有选项。) Link to problematic page. Link to similarly constructed, non-problematic p

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 将标识符添加到单独嵌套组中的重复类