0

これは以下の私のコードです:

<div id="title">
      <span><b>Title</b></span>
</div>

<div class="data">
    <ul>
            <li id="cp_name" class=""><span>Name:</span> XXXX</li>
            <li id="cp_dept" class=""><span>Dept:</span> Editing</li>
            <li id="cp_role" class=""><span>Role:</span> YYYY</li>
    </ul>
</div>

元の出力

題名

  • 名前: XXXX
  • 所属：編集
  • 役割: YYYY

期待される出力とコード

題名

所属：編集

  • 名前: XXXX

  • 役割: YYYY

    <div id="title">
   <span><b>Title</b></span>
      <div id="cp_dept">
         <span>Dept:</span> Editing
      </div>
</div>

<div class="data">
 <ul>
     <li id="cp_name" class=""><span>Name:</span> XXXX</li>
     <li id="cp_role" class=""><span>Role:</span> YYYY</li>
 </ul>
</div>

"cp_dept" の li & ul タグを抽出または削除したい、すなわち Dept: Editing data from div class="data" & div id="title" タグにデータをシフトしたくなく、li & ul タグなしでのみ期待される出力とコードに示されているデータも、ページの読み込みにすぐに影響します。

4

9 に答える 9

1

デモ

このコードを試してください..

var li=$('.data>ul>li').eq(1).remove();
var id=li.attr('id');
var html=li.html();
var div1=$('<div></div>').attr('id',id).append(html);
$('#title').append(div1);
于 2013-08-27T09:35:13.720 に答える
0

insertAfter jQuery 関数を使用します: (削除して追加) 

$(function() {
    $('#cp_dept').insertAfter('#title span');
});
于 2013-08-27T09:28:20.527 に答える
0

「cp_dept」ターゲットを追加する新しい要素を作成し、その新しい要素を「#title」に追加できます。

var title = document.getElementById('title');
var dept = document.getElementById('cp_dept');

var newDept = document.createElement('div');
newDept.innerHTML = dept.innerHTML;

// remove the old cp_dept
dept.parentNode.removeChild(dept);

title.appendChild(newDept);
于 2013-08-27T09:38:54.067 に答える
0

試す

$('#cp_dept').detach().wrapInner('<div />').contents().unwrap().appendTo('#title');

デモ:フィドル

于 2013-08-27T09:30:05.443 に答える
0 
var dept = $(".data ul li#cp_dept").html();
dept = "<div id='cp_dept'>" + dept + "</div>";
$("#title").append(dept);
$(".data ul li#cp_dept").remove();
于 2013-08-27T09:25:31.203 に答える
0

このJavaScriptのみの回答をチェックしてください

JS

(function() {
     var dpt = document.getElementById('cp_dept');
     dpt.outerHTML=""
     var tit = document.getElementById('title');
     tit.innerHTML = tit.innerHTML +"<br>"+dpt.textContent;
  })();

働くフィドル

Javascript の行を追加または編集しただけです。cp_dept を削除または編集する代わりに、CSS を に割り当てdisplay:noneます。これは同じ機能を果たしますが、この方法では cp_dept タグの内容を消去しないため、HTML マークアップはそのまま残ります。

(function() {
     var dpt = document.getElementById('cp_dept');
    // dpt.outerHTML=""
     dpt.style.display="none";
     var tit = document.getElementById('title');
     tit.innerHTML = tit.innerHTML +"<br>"+dpt.textContent;
  })();
于 2013-08-27T09:34:31.207 に答える
0

これを試して

var htm = $("#cp_dept").text();
$("#data ul #cp_dept").remove();
$("#title").append('<div id="cp_dept">'+htm+'</div>');
于 2013-08-27T09:34:53.573 に答える