javascript - 谁能帮我缩短这个荒谬的长选择器？

Question

编辑：跳到结尾以更好地解释我所追求的，谢谢

我大约有以下 html（这只是一个摘录），其中有一个嵌套的章节组织：

<span class="chapter Art" id="00034">
  <li><span class="chapterheading">Art<span>some stuff</span></li>
  <ul>
    <span class="chapter" id="00035">
      <li><span class="chapterheading selectednode">Sound</span><span>more stuff</span></li>
      <div class="idea">even more stuff</div>
    </span>
  </ul>
</span>

现在我希望使用 javascript 仅显示紧接在下面的章节标题，以及紧接在类“idea”的 div 下方，这样要查看任何“idea”，您必须单击它的直接父章节。

花了大约三个小时后（因为我对 jquery 有点陌生，我花了一段时间才意识到子选择器的真正工作原理），我想出了一个非常复杂的查询，它在显示相关方面做了我想要的节点（假设它们在运行此代码之前是隐藏的）：

t.find("li > *, ul > .chapter, ul > .chapter > li, ul > .chapter > li *, > .idea, > .idea *").show();

其中“t”是最近单击的具有“selectednode”类的节点（编辑：是该节点的父节点的父节点）。

那么有没有更短的方式来表达我在这里需要的东西？

编辑：以下是一个更大的代码片段，根据要求有很多行李。寻找评论“隐藏相同深度的兄弟章节的孩子”。

我已经对其进行了一些修剪，但它并没有达到我想要的效果：我不能让它只显示下面的直接章节和想法，它显示了一切。

function toggleNode(node, value) {
    //_("setting " + nv(node) + " to " + value + "\n");
    $(node).toggleClass("selectednode", value);
    if($(node).hasClass("selectednode") == true)
    selectednode = node;
    if($(selectednode).hasClass("selectednode") == false) // is this check really necessary?
    selectednode = 0;
}


function zoomTo(node, select) {
    var zoom, oldzoom, depth, t;
    //_("zoomTo(" + (node ? $(node).text() : "0") + ", " + select + ")");
    oldzoom = zoomednode;
    if(node != zoomednode) {
    savedepth = t = depth = $(node).parents("ul").length;
    if(!zoomednode)
        zoomednode = topChapter;
    if(!node)
        node = topChapter;
    /* capture values */
    var sz;
    var capp = cBaseSz.slice((sz = parseFloat(cBaseSz)).length);
    /* end capture */
    zoom = zoomnum = sz;
    while(--t > 0) {
            zoomnum = (zoom *= 1.15);
    }
    //_("zoom: " + zoomnum +"\ncapp: " +capp);
    zoom  += capp;
    //_("zoom: " + zoomnum);
    depth -= $(zoomednode).parents("ul").length;
    if(depth < 0)
        depth *= -1;
    switch(select) {
    case 0:
    case false:
    default:
        break;
    case true:
    case 1:
        toggleNode(zoomednode, false);
        toggleNode(zoomednode = node, true);
        break;
    case 2:
        toggleNode(zoomednode, false);
            zoomednode = 0;
    }

    /* Handle showing/hiding */

    if(1) {
        var hide;
        t = ($(selectednode) || $(".chapterheading:first"));
        _("t.text():" + t.text());
        t = t.parent().parent();
        _("isclass: " + t.attr("class"));
        var prs = $(t).parents(".chapter");
        prs = $(prs)[0] || t;
        hide = $(prs).siblings(".chapter");
        _("topparent: " + $(prs).text().slice(0,80));
        $(hide).each( function() { {
        _(($(this).html()||$(this).text()).slice(0, 80));
        }});
        $("li *, > ul, > idea", t).show();
        //t.siblings().show();
        //t.siblings().find().hide();
        //hide.children(".chapterheading").find().show();
        //showall(t.find("li *, ul > .chapter > li *"));

        // Hide deeper children of this chapter (t) 
//      $(t).find("ul *:not(ul > .chapter > li, ul > li *)").hide();
//      t.find("li > *, ul > .chapter, ul > .chapter > li, ul > .chapter > li *, > .idea, > .idea *").show();
        // Show immediate children of this chapter (t)
        //$(t).find("> li *, ul > .chapter").show();
       // t.find(".chapterheading, .ideacount").show();
        //$(hide).children().find(":not(.chapterheading, .ideacount)").hide();



        // Hide children of sibling chapters of the same depth.
        $("ul > .chapter", t).hide();
        // Hide children of siblings of the top-most parent chapter of the selected chapter.
        $("ul > .chapter, ul > .chapter .chapter", hide).hide();
        // Show the selected chapter
        $("ul > .chapter, ul > chapter .chapter", t.parent()).show();
        }

    //////////////////////////////
     // old version below, but keeping for reference
    else {
    var showzoom = 1, showselect = 1, showidea = 1, seldepth, zdepth, showlist, hidelist = {};
    /* This is the 'brute force' way of doing it, horribly inefficient */
    if(zoomednode)
        zdepth = $(zoomednode).parents(".chapter").length;
    if(selectednode)
        seldepth = $(selectednode).parents(".chapter").length;
    else
        seldepth = zdepth;
    if(!seldepth)
        seldepth = zdepth = 0;
    _("seldepth: " + seldepth + "\nzdepth: " + zdepth);
    (showlist=$(".chapter").filter( function() {
        if($(this).parents(".chapter").length < (zdepth+showzoom))
        return true;
        else {
        hidelist = $(hidelist).add(this);
        return false;
        }
    }));
    //    hidelist = $("all").not(showlist);
    if(hidelist)
        _("hidelist size: " + hidelist.length);
    _("showlist size: " + showlist.length);
    $(showlist).show()/*.not(hidelist)*/;
    if(hidelist && hidelist.length) {
        //_("Hiding " + $(hidelist).length + " elements.");
        $(hidelist).hide();
    }
    }
    /* End showing/hiding */

    /* Begin animating */
    $("#contents").animate({ fontSize: zoom }, {duration: 0, queue: false });
    $("html").animate(
        { scrollTop: $(node).offset().top - topAdjust }, {duration: 60+60*depth, queue: false }, 0);
    $(window).scrollLeft($(node).offset().left - leftAdjust);
    } else {

    zoomTo(0, 1 + (selectednode == zoomednode));
    }
}


function setupEvents() {
    $("#contents .chapterheading").click( function() {  _("\n-- -- -- CLICK -- -- --\n-- -- -- -- -- -- -- --\n"), zoomTo(this, true); });
}

编辑：为了进一步参考，标记属于以下类型（递归表示）：

<ul> <!-- A: chapter heading list -->
  <span class="chapter">
    <li><span class="chapterheading">Title</span></li>
    <!-- 0 or more of the following --> <div class="idea"><!-- more stuff --></div>
    <!-- 0 or more of A: chapter heading list -->
  </span>
</ul>

并且，变量“t”指向一个类“selectednode”的地方也将被附加，这是我希望发生以下情况的地方：

显示所有直接子 'ul' 元素，这也意味着下面的章节标题。但不要在下面显示任何内容。
隐藏所有同级章节的选定章节的显示内容。
隐藏所有不属于所选章节祖先的最顶层章节的所选章节显示的内容。

score 2 · Accepted Answer

重组您的 HTML 以使其有效。我的建议：

<div id="toc">
   <h2>Table of Contents</h2>
   <ul>
      <li id="00034" class="art">
         <span class="chapterheading">Title</span>
         <!-- more stuff -->
         <div class="idea"> ... </div>
         ...
         <ul>
            <li id="00035">
               <span class="chapterheading selected">Subtitle</span>
            </li>
            ...
         </ul>
      </li>
      <li>
         <span class="chapterheading">Second Title</span>
         ...
      </li>
      ...
   </ul>
</div>

这不使用chapter类，它只是假设所有li元素都#toc代表一章。

使用这种结构，构建的 DOM（在其上应用了所有选择器等，您可以在开发人员控制台中对其进行检查）看起来与 HTML 标记完全相同。在您的代码中，元素span内的标签ul可能会移动到li项目中的某个位置。

现在，为了隐藏章节标题之后的所有元素，我们使用以下代码 CSS 代码：

#toc li > * {
    display: none;
}

但是如果选择了 li 则显示它们：

#toc li > span.chapterheading, #toc li.selected > * {
    display: block;
}

使用 Javascript，我们现在只需要根据selected点击移动类：

$(document).ready(function() {
    $("#toc").on("click", "span.chapterheading", function(ev) {
        $(this).closest("li")
          .addClass("selected")
          .siblings().removeClass("selected");
    });
});

score 1 · Accepted Answer

很难说出您正在使用什么，因为您没有显示足够的代码。

根据您的标记模式以及我认为您在一行 JavaScript 之外所做的事情，以下是我认为可能对您有用的内容：

$( '.chapterheading' ).click( function(){
  var t = $( this );
  //I assume you are doing other stuff with t...
  t.parent().next().show();
});

演示：http: //jsfiddle.net/US4Nr/

score 0 · Accepted Answer

另一种类型的列表更适合此类问题 - 即定义列表<dl>以及定义术语<dt>和定义描述<dd>。

HTML：

<div id="toc">
    <h2>Table of Contents</h2>
    <dl>
        <dt id="00034">Title 00034</dt>
        <dd class="text">text 00034</dd>
        <dd class="idea">idea 00034</dd>
        <dd class="sub">
            <dl>
                <dt id="00035">Subtitle 0035</dt>
                <dd class="text">text 00035</dd>
                <dd class="idea">idea 00035</dd> 
            </dl>
        </dd>
    </dl>
    <dl>
        <dt id="00036">Title 00036</dt>
        <dd class="text">text 00036</dd>
        <dd class="idea">idea 00036</dd> 
    </dl>
</div>

和 javascript ：

$("#toc dt").on('click', function() {
    $(this).closest("dl")
        .children(".idea").hide().end()
        .children(".text, .sub").toggle().end()
        .siblings().find("dd").hide();
});

$("#toc dd.text").on('click', function() {
    $(this).closest("dl").children(".idea").toggle();
});

演示

所有控制都直接由 javascript 执行。DEMO 中的所有 CSS 都是为了外观，而不是为了隐藏/显示。

可能不是您想要的，尤其是关于事件处理程序的附加方式，但应该让您对如何处理这个问题有一个很好的了解。

javascript - 谁能帮我缩短这个荒谬的长选择器？

3 回答 3

Related

Reference