CODEWITHSUNDEEP
jqueryhtml
stijn.aerts
stijn.aerts

Reputation: 6206

Can't select parent of this element jQuery

I have following 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>

I use following jQuery:

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

This should select the YesSpan above when clicked on the lowest YesSpan.

However when I do console.log of this:

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

I just get the "this" element:

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]

FULL 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>

I know its not good formatting, its only to illustrate that it resembles a tree.

Image of the tree:

Tree image

When "Koud klimaat zonder dooiseizoen" is clicked, I want an extra class on "TW <= 0" and "TW <= 10".

Upvotes: 0

Views: 238

Answers (1)

Sam Battat
Sam Battat

Reputation: 5745

use this instead.

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

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

because .closest()

get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

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

EDIT:

This works, however I want to select every parent of the this element and toggle their class. Now I can only select the first parent that matches – stijn26 1 min ago

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

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

EDIT 2:

I think this is what you need (if I understand your html correctly) DEMO: http://jsfiddle.net/qx18q3xy/2/

Upvotes: 2

Related Questions