向父级中的所有<a>添加单个rel值，并将增量rel值添加到兄弟父级的<a>中。

Question

可怕的标题我知道。我希望将一个特定的rel值应用于父级中的所有子<a>，在本例中是.wrap。在.wrap的特定实例中，所有rel值都应该是相同的，但是在每个单独的.wrap (即父级的兄弟姐妹)之间，rel值应该有一个数值区分。

在下面的示例中，这个rel值采用rel="type-X"的形式，其中X是增量数值。这就是我想要的。

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

到目前为止，我所能想到的最好的方法是要么将相同的rel值应用于.wrap a的所有实例(在所有3.wrap中只有一个rel="type-1“)，要么将一个新的rel值应用到每个<a> (最后将rel="type-1”应用于rel="type-9")。

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

Answer 1

你可以写：

$('.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

如果您不一定需要使用jQuery，那么这在本机JavaScript中是很有可能的(尽管这是用ECMAScript 6/ECMAScript 2015编写的)：

​

// 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>

​