別のネストされたグループのクラスを複製するための識別子を追加

次のようなコードチャンクを扱う際、同じ要素にあるクラス "duplicated-class"の各インスタンスに一意のクラス名を追加しようとしています。クラス "affiliate-logo"。別のネストされたグループのクラスを複製するための識別子を追加

重要事項：

「重複クラスの」何でもかまいません動的変数を表します。
所望の結果は、（ 'の.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-リストから生成され

。

私は直接のためのクラスリストを生成する方法を見つけることができますラッピングIDの子孫であるため、「重複クラス」を見つけた結果を生成するものを見つけ出すことはできません。

私の最初の考えは次のとおりである。

「.affiliateロゴの隣に第二のクラスを識別し
各post-itemグループ内で「.affiliate-ロゴ」クラスを探す

post-item

を特定'（この例では：.duplicate-class）、それを変数（var = adjacentClass）<に割り当てます。これは、このチェックをどのように行うのか分かりません。
（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

**私たちは二度.each()を使用している用語の競合スニペット2では

出典

2017-02-08 Dana Marie

申し訳ありませんが、私はビットを明確にしましょう： 'duplicate-class'アイテムを見つけて、そのクラスに一意の値を追加したいと思っています。最初の「複製クラス」は「複製クラス-1」になり、2番目のクラスは「複製クラス2」になります）。 –

jqueryの兄弟（）を見ましたか？これはセレクタで行うことができるので、選択したクラスでノードの兄弟を取得するだけです。 – Snowmonkey

私は兄弟（）について考えましたが、別のネストされたグループと同じクラスを持つ要素を見つける方法を理解することはできません。つまり、ページ上で '.affiliate-group.name-a'コンボをすべて見つけて、 '.name-a'クラスのみを一意のクラス（ '.name-a-1、.name-a -2、等... '） –

UPDATE 2

を修正するために編集されました。一度はdiv.affiliate-logoごとに繰り返し、2回目にはそれぞれdiv.affiliate-logoがあります。 forは、配列に格納されている複製をフィルタリングして除外します。最も難しいのは、第2クラスを取得することでOPに問題があったということでした。これはどのようにある：

無地のJavaScriptで
$(this).prop('classList'); 

、classListは、それがどの.add、.removeせずに使われているプロパティがあり、などそれはスニペット2、いずれかのコメントにクラス名の配列を（返されますこの配列内の文字列への参照は "classString"になります）。

スニペット2をフルページモードで確認します。詳細はUPDATE 1

最初の '重複クラス' 'は重複クラス-1' となるスニペット2

にコメントされている、第二は、 '重複クラス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>

出典

2017-02-08 20:51:19 zer00ne

別のネストされたグループのクラスを複製するための識別子を追加

答えて

関連する問題