[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-frontend筆記-使用selector尋找父元素的方式parent幾種相關做法":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":20,"minRead":21},113,"frontend筆記-使用selector尋找父元素的方式parent幾種相關做法","[Frontend]筆記-使用Selector尋找父元素的方式(parent)幾種相關做法","筆記-使用Selector尋找父元素的方式(parent)幾種相關做法 最近有個小需求得回去寫了點jquery […]","\u003Ch1>筆記-使用Selector尋找父元素的方式(parent)幾種相關做法\u003C\u002Fh1>\n\u003Cp>最近有個小需求得回去寫了點jquery，因為很久沒寫，也意外的發現以前沒使用過的一個api。\u003C\u002Fp>\n\u003Cp>通常要透過selector找特定父元素時都會使用\u003Cem>.parent('element')\u003C\u002Fem>吧，但\u003Cem>.parent('element')\u003C\u002Fem>只會往前一層，如果想要繼續往前找，可以使用\u003Cem>.parents('element')\u003C\u002Fem>。\u003Cbr \u002F>\n但\u003Cem>.parents('element')\u003C\u002Fem>會有個特性，會不斷的往前找，把所有符合條件的元素都撈出來。\u003Cbr \u002F>\n如果只想要往前撈到一個特定父元素的話，可以使用\u003Cem>closest()\u003C\u002Fem>，這樣就只會往前找但符合條件就會停止。\u003C\u002Fp>\n\u003Ch2>範例\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-html\"><div class="parnet selected">\n  Hello Parent\n  <div class="child selected">\n    <div>\n      <p>Hello <\u002Fp>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>以上述解釋的話會有以下狀況\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jquery\">$('p').parent('selected');\u002F\u002F找到<div class="child selected">\n$('p').parents('selected');\u002F\u002F找到<div class="child selected">與<div class="parnet selected">\n$('p').closest('selected');\u002F\u002F找到<div class="child selected">\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>小結\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>parent() 只往上找一層\u003C\u002Fli>\n\u003Cli>closest() 往上找，找到符合條件的就會停止\u003C\u002Fli>\n\u003Cli>parents() 一直往上找，找出所有符合條件的(會丟回陣列)\u003C\u002Fli>\n\u003C\u002Ful>\n","2022-09-10T20:00:53","",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17],{"name":16,"slug":16},"frontend",{"name":18,"slug":19},"HTML","html","\u002Fblog\u002Ffrontend筆記-使用selector尋找父元素的方式parent幾種相關做法",1]