Michael Schwartz Michael Schwartz - 7 months ago 10
Javascript Question

Append textarea new line text as anchor text

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>


Any help is greatly appreciated.



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

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>