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")

我只是得到了“this”元素：

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>

我知道它不是很好的格式化，它只是为了说明它类似于树。

树的形象：

Tree image

当点击“Koud klimaat zonder dooiseizoen”时，我想在“TW＆lt; = 0”和“TW＆lt; = 10”上额外上课。

Answer 1

改为使用它。

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

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

因为.closest()

通过测试元素获取与选择器匹配的第一个元素本身并遍历DOM树中的祖先。

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

编辑：

这有效，但是我想选择这个元素的每个父元素并切换他们的课程。现在我只能选择那个第一个父母比赛 - stijn26 1分钟前

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

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

编辑2：

我认为这就是你需要的（如果我正确理解你的HTML）演示：http://jsfiddle.net/qx18q3xy/2/

无法选择此元素jQuery的父级

1 个答案: