Fügen Sie einen einzelnen Rel-Wert zu allen <a> im Elternteil hinzu und fügen Sie außerdem inkrementelle rel-Werte zu <a> der Geschwistereltern hinzu.

Question

Schrecklicher Titel, den ich kenne. Ich möchte einen bestimmten rel-Wert auf alle Kinder <a> innerhalb eines Elternteils anwenden, in diesem Fall .wrap. Alle rel-Werte sollten in einem bestimmten Fall von .wrap gleich sein, aber zwischen jedem einzelnen .wrap (d. H. Den Geschwistern eines Elternteils) sollten die rel-Werte eine numerische Unterscheidung haben.

Im folgenden Beispiel hat dieser rel-Wert die Form rel="type-X", wobei X der inkrementelle numerische Wert ist. Das ist was ich will.

<div class="wrap"> 
    <div><a rel="type-1" href="#"></a></div> 
    <div><a rel="type-1" href="#"></a></div> 
    <div><a rel="type-1" href="#"></a></div> 
</div> 
<div class="wrap"> 
    <div><a rel="type-2" href="#"></a></div> 
    <div><a rel="type-2" href="#"></a></div> 
    <div><a rel="type-2" href="#"></a></div> 
</div> 
<div class="wrap"> 
    <div><a rel="type-3" href="#"></a></div> 
    <div><a rel="type-3" href="#"></a></div> 
    <div><a rel="type-3" href="#"></a></div> 
</div> 

Das Beste, was ich habe in der Lage gewesen, mit so weit zu kommen ist es, entweder entweder den gleichen rel Wert für alle Instanzen von .wrap a gilt (also nur eine Instanz von rel = „Typ-1“ in all 3 .wrap) oder ich einen neuen rel Wert jedem <a> Anwendung (und mit rel am Ende = "Typ-1" rel = "Typ-9")

var i = 0; 
$('.wrap').find(function() { 
    i ++; 
    $(this).find('a').attr('rel', 'type-' + i); 
}); 

Answer 1

können Sie schreiben:

$('.wrap').each(function(index, element) { 
    $(this).find('a').attr('rel', 'type-' + (index + 1)); 
}); 

$(function() { 
 
    $('.wrap').each(function(index, element) { 
 
    $(this).find('a').attr('rel', 'type-' + (index + 1)); 
 
    }); 
 
    
 
    $('#txtarea').text($('#myBlock').html()) 
 
    .height($('#txtarea')[0].scrollHeight); 
 
    
 
    $('#addRel').on('click', function(e) { 
 
    $('.wrap').each(function(index, element) { 
 
     $(this).find('a').attr('rel', 'type-' + (index + 1)); 
 
    }); 
 
    $('#txtarea').text($('#myBlock').html()); 
 
    }); 
 

 
    $('#removeRel').on('click', function(e) { 
 
    $('.wrap').each(function(index, element) { 
 
     $(this).find('a').removeAttr('rel'); 
 
    }); 
 
    $('#txtarea').text($('#myBlock').html()); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 

 
<div id="myBlock"> 
 
    <div class="wrap"> 
 
     <div><a href="#"></a></div> 
 
     <div><a href="#"></a></div> 
 
     <div><a href="#"></a></div> 
 
    </div> 
 
    <div class="wrap"> 
 
     <div><a href="#"></a></div> 
 
     <div><a href="#"></a></div> 
 
     <div><a href="#"></a></div> 
 
    </div> 
 
    <div class="wrap"> 
 
     <div><a href="#"></a></div> 
 
     <div><a href="#"></a></div> 
 
     <div><a href="#"></a></div> 
 
    </div> 
 
</div> 
 
<textarea id="txtarea" style="width: 100%;"></textarea> 
 
<button id='addRel'>Add Rel Attr</button> 
 
<button id='removeRel'>Remove Rel Attr</button>

Answer 2

$('.wrap').each(function(i,v) { 
    $(v).find('a').attr('rel', 'type-' + i); // 1st run will be type-0 
}); 

Answer 3

Wenn Sie nicht unbedingt benötigen, jQuery zu verwenden, dann ist dies durchaus möglich, in nativer JavaScript (wenn auch diese in ECMAScript 6/ECMAScript 2015 geschrieben):

// converting the results from document.querySelectorAll() into an 
 
// Array. 
 
// Using Array.prototype.forEach() to iterate over the array elements 
 
// held in that Array: 
 
Array.from(document.querySelectorAll('div.wrap')).forEach(function(wrap, index) { 
 
    // wrap: (the first argument) is the current array element of 
 
    // the array over which we're iterating, 
 
    // index: (the second argument) is the index of the current 
 
    // array-element within that array. 
 

 
    // finding the <a> elements within the current div.wrap element, 
 
    // converting that collection into an Array, again using 
 
    // Array.from(), and then again iterative over the elements 
 
    // using Array.prototype.forEach(). 
 
    Array.from(wrap.querySelectorAll('a')).forEach(function(a) { 
 
    // a: (the first argument) again refers to the current 
 
    // array-element of the array over which we're iterating. 
 

 
    // setting the attribute 'rel' to the value of the string 
 
    // 'type-' concatenated with the number formed by the addition 
 
    // of the index variable (the outer forEach()) added to the 
 
    // number 1: 
 
    a.setAttribute('rel', 'type-' + (index + 1)); 
 
    }); 
 
});

div.wrap { 
 
    border: 1px solid #f90; 
 
    margin: 0 0 0.5em 0; 
 
} 
 
a { 
 
    display: inline-block; 
 
    margin: 0.2em 0; 
 
} 
 
a::before { 
 
    content: 'rel="' attr(rel)'"'; 
 
}

<div class="wrap"> 
 
    <div> 
 
    <a href="#"></a> 
 
    </div> 
 
    <div> 
 
    <a href="#"></a> 
 
    </div> 
 
    <div> 
 
    <a href="#"></a> 
 
    </div> 
 
</div> 
 
<div class="wrap"> 
 
    <div> 
 
    <a href="#"></a> 
 
    </div> 
 
    <div> 
 
    <a href="#"></a> 
 
    </div> 
 
    <div> 
 
    <a href="#"></a> 
 
    </div> 
 
</div> 
 
<div class="wrap"> 
 
    <div> 
 
    <a href="#"></a> 
 
    </div> 
 
    <div> 
 
    <a href="#"></a> 
 
    </div> 
 
    <div> 
 
    <a href="#"></a> 
 
    </div> 
 
</div>