将带有子文本的元素移动到另一个元素中

Question

正如您从此剪辑中看到的，我有<a>和<h4>，其中<a>的子项与剪辑上的第一个<a>匹配。我要做的是将<h4>与嵌套<a>的文本一起放入顶级<a>。所以最终产品将是<a><h4>text</h4></a>。我已经尝试过使用jQuery和appendTo，但是它没有呈现我追求的标记。如何获得所需的标记？

我目前创建的jQuery代码是jQuery(".panel-group .text-danger").appendTo( jQuery("a[href='#collapseOne']"));

<div class="panel panel-default">
  <a class="panel-heading visible-xs-block visible-sm-block visible-md-block visible-lg-block" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"></a>
  <h4 class="text-danger">
    <a class="panel-heading visible-xs-block visible-sm-block visible-md-block visible-lg-block" data-parent="#accordion" data-toggle="collapse" href="#collapseOne">Urgent</a>
  </h4>
</div>

Answer 1

根据HTML标准，您无法在块内容元素<h4>中逻辑放置块级元素<a>。所以，你需要找到一些替代方法。它只是无效的HTML（HTML 5除外）。

另一件事是，你不能将<a>嵌入另一个<a>！

有关vsync的评论，请查看Creating anchor tag inside anchor tag。

Answer 2

执行此操作的一种方法是clone节点（可以在纯JavaScript或JQuery中完成），并在将其应用于DOM之前在内存中对其执行操作。您还需要一个比a[href='#collapseOne']更具体的选择器，因为更改将应用​​于示例中的多个DOM节点，因为多个节点将匹配此选择器（除非这是有意的）。

• 对于JQuery克隆：http://api.jquery.com/clone/
• 对于Javascript克隆：https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode

您可以使用与此类似的语法克隆节点：

var clonedNode = $("#idSelector").clone();

clonedNode.html(""); // Clears the content of the clone, not the DOM element

示例逻辑

1. 将超链接的文本存储在变量
中
2. 获取H4节点的克隆副本。
3. 截断克隆的H4节点的内容。
4. 使用超链接文本替换克隆节点的内容。
5. 使用新的混合节点更新目标元素。

示例代码：

＆＃13;
＆＃13;
$(function() {
    //Add a click event to each .panel-heading element below an H4
    //This could be removed for the code to run on page-load the references would simply need to be updated.
    $("H4").on("click", ".panel-heading", function(e, data) {
        var linkText = $(this).text(); // Get the text of the link we want
        var clonedNode = $(this).closest("H4").clone(); // Should grab the parent H4 of the hyperlink that was clicked and make a copy.
        clonedNode.html(""); // truncate the contents of the cloned node
        clonedNode.text(linkText); // Set the link text of the H4
        $(".panel").find(".parent-link").html(clonedNode);
    });
    
    //for no click event the logic is the same, but the selectors change.
});
＆＃13;
.parent-link {
    border: solid 1px #000000;
    width: 200px;
    display: block;
    height: 20px;
}
H4 {
    display: block;
    margin: 0px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel panel-default">
  <a class="panel-heading visible-xs-block visible-sm-block visible-md-block visible-lg-block parent-link" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"></a>
  <h4 class="text-danger">
    <a class="panel-heading visible-xs-block visible-sm-block visible-md-block visible-lg-block" data-parent="#accordion" data-toggle="collapse" href="#collapseOne">Urgent</a>
  </h4>
      <h4 class="text-normal">
    <a class="panel-heading visible-xs-block visible-sm-block visible-md-block visible-lg-block" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo">Normal</a>
  </h4>
</div>
＆＃13;
＆＃13;
＆＃13;

或者如果您更喜欢外部资源：http://jsfiddle.net/xDaevax/yykbfd7b/

我添加了一些CSS来突出显示其内容最终被替换的父节点。我还在父链接中添加了一个CSS类（parent-link），以便于选择。