Question

我有以下标签。我必须分离并将其附加到div。

var i = 1;
jQuery('.tm-radio').each(function () {
    jQuery(this).addClass('tm-radio-'+i);
    var label = jQuery('.tm-radio').next('label');
    label.detach();

    jQuery('.tm-radio-'+i).append(label);
    i++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="1">
</div>
<label>Label 1</label>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="2">
</div>
<label>Label 2</label>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="3">
</div>
<label>Label 3</label>

我必须将标签移动到tm-radio类的受尊敬的div。

它将所有标签附加到.tm-radio-1 div

Answer 1

代码中的问题在var label = jQuery('.tm-radio').next('label');行上，在这里您将在第一次迭代中获取所有标签，因此它将所有标签附加到第一个元素上。为了使它起作用，因为jQuery('.tm-radio')引用了当前元素，所以用jQuery(this)替换了this。

由于append()方法移动了实际元素，因此也不需要detach()。

var i = 1;
jQuery('.tm-radio').each(function() {
  jQuery(this).addClass('tm-radio-' + i);
  var label = jQuery(this).next('label');    
  jQuery('.tm-radio-' + i).append(label);
  i++;
});

var i = 1;
jQuery('.tm-radio').each(function() {
  jQuery(this).addClass('tm-radio-' + i);
  var label = jQuery(this).next('label');
  jQuery('.tm-radio-' + i).append(label);
  i++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="1">
</div>
<label>Label 1</label>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="2">
</div>
<label>Label 2</label>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="3">
</div>
<label>Label 3</label>

您甚至可以避免使用counter变量，并在回调中使用index参数生成唯一的类名。

jQuery('.tm-radio').each(function(i) {
  jQuery(this).addClass('tm-radio-' + i);
  var label = jQuery(this).next('label');    
  jQuery('.tm-radio-' + i).append(label);
});

您可以通过简单地附加到当前元素来使其更加简单，如下所示。

jQuery('.tm-radio').each(function() {
  jQuery(this).append(jQuery(this).next('label'));
});

jQuery('.tm-radio').each(function() {
  jQuery(this).append(jQuery(this).next('label'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="1">
</div>
<label>Label 1</label>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="2">
</div>
<label>Label 2</label>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="3">
</div>
<label>Label 3</label>

使用append() method with a callback在内部进行迭代要简单得多。

jQuery('.tm-radio').append(function() {
  return jQuery(this).next('label');
});

jQuery('.tm-radio').append(function() {
  return jQuery(this).next('label');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="1">
</div>
<label>Label 1</label>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="2">
</div>
<label>Label 2</label>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="3">
</div>
<label>Label 3</label>

Answer 2

另一种实现方法是，假设您具有相同数量的标签和相同数量的div。使用下面的代码，您将能够更加灵活地了解自己的dom。例如，所有标签都可以位于文件末尾或DOM中的任何位置。

let label_dom = $("label"); //getting all label elements;
let radio_dom = $(".tm-radio");

function labelInRadioDom() {
  label_dom.each(function(index) {

    radio_dom[index].append(label_dom[index]); // append the label to the good Div (1st label go in the 1st Div, 2nd to the 2nd etc ...)

  })
}


labelInRadioDom();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="1">
</div>

<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="2">
</div>

<div class="tm-radio">
  <input type="radio" name="achieve" class="input-radio" value="3">
</div>
<label>Label 1</label>
<label>Label 2</label>
<label>Label 3</label>

分离标签并附加标签

2 个答案: