jquery - JQueryを使用してキャプチャしたテキストをH2として表示する方法

Question

私はJqueryを学ぼうとしていますが、ここに問題があります。Jquery を使用してアンカー要素からテキストを取得する方法を知りたい

alert($(this).text());

しかし問題は、Jquery を使用して、このキャプチャされたテキストをページに H2 タグとして表示する方法がわからないことです。

Answer 1

テキストを取得したら、それを要素に割り当てることができます...

<script>
$(function(){
    // (this) won't work here, needs to be an element, but you get the idea
    var str = $(this).text();
    $('#blah').html('<h2>'+str+'</h2>');
});
</script>

<div id="blah"></div>

..またはもっと簡単に...

<script>
$(function(){
    $('#blah').html( $(this).text() );
});
</script>

<h2 id="blah"></h2>

Answer 2

あなたのHTMLにこのようなものがあれば

<div id="newh2placeholder"></div>

divの現在の要素に追加する場合は、次を使用できます

var newHeader = $("<h2>"+$(this).text()+"</h2>");
$("#newh2placeholder").append(newHeader);

または、これを使用してコンテンツを完全に置き換えることができます

$("#newh2placeholder").html(newHeader);

しかし、正確に何をしたいかによって異なります。基本的に、式の中に入る文字列は CSS セレクターであることを覚えておく必要がある$(str)ので、複数の一致があると複数の場所で繰り返されるため、html がこのような場合

<div class='someClass'></div>
...
<div class='someClass'></div>

クラスCSSセレクターを使用すると、アクションが複数の場所で繰り返されます

//to append
$(".someClass").append(newHeader);
//or to replace inner html
$(".someClass").html(newHeader);

これにより、アクションが両方で繰り返されます

また、HTML タグ要素をラップする関数を作成するのも好きです

function wrapInTag(tag,target){
    return $("<"+tag">"+target+"</"+tag+">");
}

そこから、タグ、ターゲット データ、CSS セレクターを受け取り、作業を行う関数を作成できます。

function appendToSelection(selector,tag,data){
    toAppend = wrapInTag(tag,data);
    return $(selector).append(toAppend);
}

function setInnerHtmlForSelection(selector,tag,data){
    newHtml = wrapInTag(tag,data);
    return $(selector).html(newHtml);
}

そして、コードで関数を使用するだけです

data = $(this).text();
tag = "h2";
selection = "#newh2placeholder";
//if you want to append
result = appendToSelection(selection,tag,data);
//if you want to replace the html
result = setInnerHtmlForSelection(selection,tag,data);

Answer 3

次のような HTML 部分があるとします。

<div>
     <h2 id="my_h2"></h2>
     <a href="#" id="my_anchor">Some text to grab</a>
</div>

次に、h2ユーザーがクリックした後にテキストを内部に配置するにはmy_anchor:

$('#my_anchor').click(function(){
     $('#my_h2').text($(this).text());
});

Answer 4

$('h2').text(
  $('#my-anchor-element').text();
).appendTo('#parent-element');