附加 textarea 新行文本作为锚文本

Question

Weave = http://kodeweave.sourceforge.net/editor/#4c11169c009d3096f896798b8b28e088

I have a textarea.libraries which consists of the following value (this changes depending on the user input).

https://necolas.github.io/normalize.css/4.1.1/normalize.css
https://leaverou.github.io/prefixfree/prefixfree.js
http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js

I know I can detect the number of lines the textarea has by using a simple for loop...

for (i = 0; i <= $(".libraries").val().split("\n").length - 1; i += 1) {
  // Every new line appends an anchor
  $(".assets").append('<a class="block" href="javascript:void(0)">'+ i +'</a>')
}

In this case, when the anchors are appended how can I grab say first line being the normalize link to be the first anchors text, prefix-free for the second, and so on?

If you're still confused. I'm trying to take this value:

https://necolas.github.io/normalize.css/4.1.1/normalize.css
https://leaverou.github.io/prefixfree/prefixfree.js
http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js

and turn it into...

<a data-action="call1">https://necolas.github.io/normalize.css/4.1.1/normalize.css</a>
<a data-action="call2">https://leaverou.github.io/prefixfree/prefixfree.js</a>
<a data-action="call3">http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js</a>
<a data-action="call4">https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js</a>

 var download_to_textbox = function (url, el) { return $.get(url, null, function (data) { el.val(data) }, "text") }; // Get library index upon anchor click var libraryIndex = function() { $(".assets a").on("click", function() { alert($(this).index() + 1) }) }; $(".libraries").on("keyup change", function() { $(".assets").empty() for (i = 1; i <= $(".libraries").val().split("\\n").length; i += 1) { $(".assets").append('<a class="block" href="javascript:void(0)">'+ i +'</a>') } setTimeout(function() { libraryIndex() }, 300) }).trigger("change")

 .wrapper, .assets, .bottom { position: absolute; } .wrapper { top: 0; left: 0; right: 0; bottom: 0; font-size: 12px; } .assets textarea { width: 98%; height: 58px; } .assets { top: 0; bottom: 70px; overflow: auto; } .assets a { font-size: 17px; padding: 7px; } .bottom { bottom: 0; } .bottom textarea { height: 60px; padding: 0; padding-top: 3px; border: 0; border-top: 1px solid #666; } /* variable classe */ .block { display: block; } .fill { width: 100%; } .hide { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="assets fill"> <!-- <textarea class="example"></textarea> --> </div> <div class="bottom fill"> <textarea class="libraries fill">https://necolas.github.io/normalize.css/4.1.1/normalize.css https://leaverou.github.io/prefixfree/prefixfree.js http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js</textarea> </div> </div>

Answer 1

I think you need this, but as I said in comments is hard to understand. However, here you are the modified snippet:

Edited

I'm make an edition due your new comment about what is your expected result. Here you are:

 var download_to_textbox = function (url, el) { return $.get(url, null, function (data) { el.val(data) }, "text") }; // Get library index upon anchor click var libraryIndex = function() { $(".assets a").on("click", function() { alert($(this).index() + 1) }) }; $(".libraries").on("keyup change", function() { $(".assets").empty() var lines = $(".libraries").val().split("\\n"); for (i = 0; i < lines.length; i ++) { $(".assets").append('<a data-action="call'+(i+1)+'">'+ lines[i] +'</a>') } setTimeout(function() { libraryIndex() }, 300) }).trigger("change")

 .wrapper, .assets, .bottom { position: absolute; } .wrapper { top: 0; left: 0; right: 0; bottom: 0; font-size: 12px; } .assets textarea { width: 98%; height: 58px; } .assets { top: 0; bottom: 70px; overflow: auto; } .assets a { font-size: 17px; padding: 7px; display:block; } .bottom { bottom: 0; } .bottom textarea { height: 60px; padding: 0; padding-top: 3px; border: 0; border-top: 1px solid #666; } /* variable classe */ .block { display: block; } .fill { width: 100%; } .hide { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="assets fill"> <!-- <textarea class="example"></textarea> --> </div> <div class="bottom fill"> <textarea class="libraries fill">https://necolas.github.io/normalize.css/4.1.1/normalize.css https://leaverou.github.io/prefixfree/prefixfree.js http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js</textarea> </div> </div>