將元素內的文本移動到其子元素

Question

我想將label中的文本片段移動到a元素中。我不是一個jQuery嚮導，我不知道如何使用appendTo,insertBefore等，當我不能定位文本示例。除了文本的移動之外，我想保持HTML不變。

<div class="column"> 
    <div class="cart"> 
     <div class="filter"> 
      <label> 
       <a></a> 
       textsample 
      </label> 
     </div> 
     <div class="filter"> 
      <label> 
       <a></a> 
       textsample 
      </label> 
     </div>   
    </div> 

Answer 1

您可以遍歷anchor元素，並使用.append()移動文本。

$(".filter label a").each(function() { 
 
    $(this).append(this.nextSibling); //Read the text node using plain JS property 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="column"> 
 
    <div class="xart"> 
 
    <div class="filter"> 
 
     <label> 
 
     <a href="#"></a>textsample</label> 
 
    </div> 
 
    <div class="filter"> 
 
     <label> 
 
     <a href="#"></a>textsample</label> 
 
    </div> 
 
    </div>

Answer 2

你也許可以做到像這樣。

var getTextNodesIn = function(el) { 
    return $(el).contents().filter(function() { 
     return this.nodeType == 3; 
    }); 
}; 

$(".filter label").each(function() { 
    // retrieves the text content from the `<label>` 

    var theText=$(this).text(); 
    // find the text content and remove it 
    getTextNodesIn(this).remove(); 

    // add the text content back to the `<a>` tag 
    $(this).find("a").html(theText); 
}); 

Answer 3

查找文本，然後更換標籤的內容：

$('.filter label').each(function() { 
 
    var text = $(this).text(); 
 
    $(this).html('<a>' + text + '</a>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="column"> 
 
    <div class="xart"> 
 
    <div class="filter"> 
 
     <label> 
 
     <a></a> 
 
     textsample 
 
     </label> 
 
    </div> 
 
    <div class="filter"> 
 
     <label> 
 
     <a></a> 
 
     textsample 
 
     </label> 
 
    </div> 
 
    </div>

Answer 4

請看看這個答案jQuery中：

$(".filter label").each(function() { 
    var Text=$(this).text(); 
    $(this).text(""); 
    $(this).append('<a>'+Text+'</a>'); 
});