<input type="text">のvalueの値に他要素の文字列を挿入したい

Question

<input type="text">のvalueの値に、他要素の文字列を挿入したいです。

具体的には以下の通りです。

<input type="text" name="hoge" value="text1,text2,text3">

<div class="hoge2">
<a href="#">text1text1text1text1</a>
<a href="#">text2text2text2text2</a>
<a href="#">text3text3text3text3</a>
<a href="#">text4text4text4text4</a>
<a href="#">text5text5text5text5</a>
</div>

「hoge2」のaタグ内の文字列を、「hoge」のvalueの値として挿入したいです。
「hoge2」は動的要素でaタグの数も文字列も変わります。

下記2パターンをご教授いただければ助かります。

(1)並び順3つ目までを「,(カンマ)」区切りで挿入
(2)ランダムで1つ抽出し挿入

ご教授のほどよろしくお願いいたします。

Answer 1

タグにjQueryがあったので、jQuery前提です。
「上から３つ」の後に「ランダム」が実行されるので
そのままだとランダムの結果のみ残る感じになりますが、
// ランダムの下２行をコメントアウトしてもらえれば
「上から３つ」の動作が確認できると思います。

$(function(){
	var hoge = $('[name=hoge]');
	// 一旦 input タグの value を空にします
	hoge.val('');
	var hoge2 = $('.hoge2');
	
	// 上から３つ
	var values = [];
	hoge2.children().each(function(index){
		// 3つ以上なら終了
		if(index >= 3) return false;
		values.push($(this).html());
	});
	hoge.val(values.join(','));
	
	
	// ランダム
	var random = Math.floor(Math.random() * hoge2.children().length);
	hoge.val(hoge2.children().eq(random).text())
});

Comments

[castail]

notable様

ご回答ありがとうございます。

ご教授頂いた内容で実現できました！
この度は誠にありがとうございました。

Answer 2

基本的な動作としては以下のコードでいけると思います。

$('.hoge2 a').on('click', fucntion(){
    $('hoge').val( $(this).text() );
});

(1)の要件は、
text1～ → text2～ → text3～ とクリックした場合、
「text1～,text2～,text3～」と表示したいということでしょうか？
それならば、

$('.hoge2 a').on('click', fucntion(){
    var str_hoge = $('hoge').val();
    if ( count( $('hoge').val().split(',') ) <= 3 ) str_hoge = str_hoge + ',';
    str_hoge = str_hoge + $(this).text();
    $('hoge').val( str_hoge  );
});

のような感じになるんじゃないでしょうか。(テストしてませんのでエラーはでるかも)

(2)については質問の意図が少し分からないので割愛させていただきます。

Comments

[castail]

silverleo様

ご回答ありがとうございます。

クリックではなくaタグ内部の文字列を取得したいと考えておりました。

解決策をご提示頂いた方がいらっしゃいましたので、恐縮ですが今回はそちらをベストアンサーとさせて頂きます。