Невозможно выбрать родителя данного элемента JQuery

Question

У меня есть следующий HTML:

<span class="YesSpan"> 
    <span class="glyphicon glyphicon-ok"> TW <= 0</span> 
</span> 
<ul> 
    <li> 
     <span class="YesSpan"> 
      <span class="glyphicon glyphicon-ok"> Koud klimaat zonder dooiseizoen</span> 
     </span> 
    </li> 
</ul> 

Я использую следующий JQuery:

$(".YesSpan").on("click", function() { 
$(this).parent().parent().closest("span").toggleClass("YesSpanActive"); 
     $(this).toggleClass("YesSpanActive"); 
    }); 

Это должно выбрать YesSpan выше при нажатии на нижнюю YesSpan.

Однако, когда я console.log этого:

$(this).parent().parent().closest("span") 

я просто получить "это" элемент:

li, prevObject: jQuery.fn.init[1], context: span.YesSpan, jquery: "2.1.3", constructor: function, selector: ""…]0: licontext: span.YesSpan.YesSpanActiveaccessKey: ""attributes: NamedNodeMapbaseURI: "http://localhost:1848/ClimateChart/ShowExercises?selectedYear=4&continentId=1&countryId=1&climateId=1"childElementCount: 1childNodes: NodeList[1]children: HTMLCollection[1]classList: DOMTokenList[2]className: "YesSpan YesSpanActive"clientHeight: 54clientLeft: 1clientTop: 1clientWidth: 287contentEditable: "inherit"dataset: DOMStringMapdir: ""draggable: falsefirstChild: span.glyphicon.glyphicon-okfirstElementChild: span.glyphicon.glyphicon-okhidden: falseid: ""innerHTML: "<span class="glyphicon glyphicon-ok"> Koud klimaat zonder dooiseizoen</span>"innerText: " Koud klimaat zonder dooiseizoen"isContentEditable: falsejQuery2130333855878561735151: 12lang: ""lastChild: span.glyphicon.glyphicon-oklastElementChild: span.glyphicon.glyphicon-oklocalName: "span"namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: nullnextSibling: nullnodeName: "SPAN"nodeType: 1nodeValue: nulloffsetHeight: 56offsetLeft: 22offsetParent: lioffsetTop: 4offsetWidth: 289onabort: nullonautocomplete: nullonautocompleteerror: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonshow: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<span class="YesSpan YesSpanActive"><span class="glyphicon glyphicon-ok"> Koud klimaat zonder dooiseizoen</span></span>"outerText: " Koud klimaat zonder dooiseizoen"ownerDocument: documentparentElement: liparentNode: liprefix: nullpreviousElementSibling: nullpreviousSibling: nullscrollHeight: 54scrollLeft: 0scrollTop: 0scrollWidth: 287shadowRoot: nullspellcheck: truestyle: CSSStyleDeclarationtabIndex: -1tagName: "SPAN"textContent: " Koud klimaat zonder dooiseizoen"title: ""translate: truewebkitdropzone: ""__proto__: HTMLSpanElementlength: 1prevObject: jQuery.fn.init[1]__proto__: jQuery[0] 

Полноценный HTML:

<ul class="main"> 
    <li> 
     <span class="YesSpan"> 
      <span class="glyphicon glyphicon-ok"> TW <= 10</span> 
     </span> 
     <ul> 
      <li> 
       <span class="YesSpan"> 
       <span class="glyphicon glyphicon-ok"> TW <= 0</span> 
       </span> 
       <ul> 
       <li> 
        <span class="YesSpan"> 
         <span class="glyphicon glyphicon-ok"> Koud klimaat zonder dooiseizoen</span> 
        </span> 
       </li> 
       <li> 
        <span class="NoSpan"> 
       </li> 
       </ul> 
      </li> 
    <li> 
    <span class="NoSpan"> 
     <span class="glyphicon glyphicon-remove"> TJ <= 0</span> 
    </span> 
    <ul> 
<li> 
<span class="YesSpan"> 
<span class="glyphicon glyphicon-ok"> Koudgematigd klimaat met strenge winter</span> 
</span> 
</li> 
<li> 
<span class="NoSpan"> 
<span class="glyphicon glyphicon-remove"> NJ <= 200</span> 
</span> 
<ul> 
<li> 
<span class="YesSpan"> 
<span class="glyphicon glyphicon-ok"> TK <= 15</span> 
</span> 
<ul> 
<li> 
<span class="YesSpan"> 
<span class="glyphicon glyphicon-ok"> Gematigd altijd droog klimaat</span> 
</span> 
</li> 
<li> 
<span class="NoSpan"> 
<span class="glyphicon glyphicon-remove"> Warm altijd droog klimaat</span> 
</span> 
</li> 
</ul> 
</li> 
<li> 
<span class="NoSpan"> 
<span class="glyphicon glyphicon-remove"> TK <= 18</span> 
</span> 
<ul> 
<li> 
<span class="YesSpan"> 
<span class="glyphicon glyphicon-ok"> NJ <= 400</span> 
</span> 
<ul> 
<li> 
<span class="YesSpan"> 
</li> 
<li> 
<span class="NoSpan"> 
<ul> 
</li> 
</ul> 
</li> 
<li> 
<span class="NoSpan"> 
<ul> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 

Я знаю его а не хорошее форматирование, его можно проиллюстрировать только тем, что он напоминает дерево.

Изображение дерева:

Когда "КОУД klimaat Zonder dooiseizoen" нажата, я хочу дополнительный класс на "TW < = 0" и "TW < = 10".

Answer 1

использовать это вместо этого.

$(this).parent().parent().prev('span').toggleClass("YesSpanActive"); 

DEMO: http://jsfiddle.net/qx18q3xy/

потому .closest()

получить первый элемент, соответствующий селектор путем тестирования элемента себя и проходя через его предков в дереве DOM.

~ http://api.jquery.com/closest/

EDIT:

Это работает, но я хочу, чтобы выбрать каждый родительский элемент этого и переключить их класс. Теперь я могу выбрать только первый родитель, который матчи - stijn26 1 мин назад

DEMO: http://jsfiddle.net/qx18q3xy/1/

$(this).parent().parent().siblings('span').toggleClass("YesSpanActive"); 

EDIT 2:

Я думаю, что это то, что вам нужно (если я понимаю, ваш html правильно) DEMO: http://jsfiddle.net/qx18q3xy/2/