chi's coding life

最近在自己在練習JQ的toDoList，卻沒寫多少就碰到困難，雖然很笨的問題但還是紀錄一下。

​
現在我的下方先做了一個表單 有兩列 分別是 test  &  test2 

<div id="header">
	   
	   <div id="todoInput">
	      <h2>My To Do List</h2>
	      <input type="text" id ="myInput" placeholder="ToDo...">
	      
	      <input type="button" id="inputAdd" value="Add" onclick="newList()">
	   </div>
	</div>
	<ul id ="list">
		<li>test </li>
		<li>test2</li>
	</ul>

我希望當頁面reload時可以根據list 的長度 動態的增加一個 x 

我們先抓出li有多少個後，起初我以為可以類似上方圖一樣eq() 裡面便可以判端我的 i ，但卻沒想到他其實是個字串會報錯

因此我想到可以利用下圖這種方式，這樣就可以動態的產生

$('li').eq(i).append('<span>x</span>');

但馬克先生跟我說還有更好的寫法，叫我先不要把eq放在外面，一樣放在裡面當字串，因此我又想到另一種

$('li:eq('+i+')').append('<span>x</span>');

可是馬克先生還是不喜歡叫我在去查 `` 與 ''  的差別，後來查了資料後發現

模板源文本使用 (` `) 圍著，而非字串常用的、英文中的單引號或雙引號。模板源文本中可以包涵由錢字符($)與大括號({ })所構成的佔位符(即：${expression})，佔位符與其附近的文字會一併傳給函數，預設函數將把這些部分組合成一個單一的字串。

好文言文的解釋，根本不懂所以看程式碼最快，根據上方的範例我們再改寫

$(`li:eq(${i})`).append('<span>x</span>');

透過反單引號的 `` ，便可以透過字串的方式呈現且可以一併傳給函數

---

參考資料

1. 模板源文本