在jQuery中选择下一个第一个元素答案

【问题标题】：Select next first element in jQuery在jQuery中选择下一个第一个元素
【发布时间】：2009-09-09 14:21:32
【问题描述】：

第一个传奇 "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illoinvente veritatis et quasi ********* 此处为示例文本 ****************

        <fieldset id="fs2">
            <legend id="leg2">Second Legend</legend>
            <div id="div2">
                "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint

                  <div id="div2Child">

                      ********* Sample text here ****************
                 </div>
            </div>

        </fieldset>

当我点击图例时，我应该只获得第一个 div（div1 和 div2）的内容。我不想显示“示例文本”，它是 div 的子 div(Id -->> div1Child 和 div2Child)。任何帮助，将不胜感激。很紧急。

提前致谢。

【问题讨论】：

我更新了我的代码，展示了如果用户想要“阅读更多”或“查看更多”，您可以如何处理显示 divChild。点击图例只会显示第一个 DIV，然后隐藏该父级中的所有子 DIV。

标签： jquery

【解决方案1】：

这是有关如何处理在图例单击时显示第一个父 div，然后通过单击“阅读更多”按钮显示父 div 的子 div 的代码...

<script>
    $(document).ready(function() {
        $("fieldset legend").click(function() {
            $(this).next("div").toggle().children("div").each(function() {
                $(this).hide();
            });
        });
        $(".btnreadmore").click(function() {
            $(this).next("div").show();
        });
    });
</script>

<fieldset id="fs1">
        <legend id="leg1">First Legend</legend>
        <div id="div1" class="hidden">
            "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
            laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi. 
            <input type="button" value="read more" class="btnreadmore" />                  
             <div id="div1Child">
                  ********* Sample text here ****************
              </div>
        </div>
    </fieldset>
<fieldset id="fs2">
        <legend id="leg2">Second Legend</legend>
        <div id="div2" class="hidden">
            "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
            voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
            <input type="button" value="read more" class="btnreadmore" />                  
              <div id="div2Child">
                  ********* Sample text here ****************
             </div>
        </div>
    </fieldset>

【讨论】：

是的，我已经使用了这个代码。但我不想让其他 div 在里面切换（）。
是的，根据您的代码，它将隐藏“div1”内的所有 div。但是当点击 div1Child 时，我不应该让他们切换（）。我正在尝试为整个应用程序编写一个通用方法。有什么想法吗？
没有没有。 toggle() 仅在单击图例时触发。
@engineerachu：您的问题是您想在点击时切换图例的第一个 DIV。
谢谢。我会检查并通知您。

【解决方案2】：

这是我能想到的最好的了..

$('legend').click(function(e){
     var $div = $(this).next('div').clone();
     var text = $div.children().remove().end().text();
     console.log(text);
});

编辑：以上代码假设：

你不想在你的 <div id="div1"> 除了直接文本和
您正在使用 Firebug 开发您的代码。

【讨论】：

你好 dalbaeb，你是绝对正确的。我只得到第一个 div 的文本。现在我的确切情况是在单击 div 时将 css->display 切换为“block”和“none”。当我点击“div1”时，所有内容都应该切换显示css（块和无），但是当我点击“div1Child”时，它不应该发生。你有什么想法吗？我按你说的试过了，但它似乎不接受 css 属性。
对不起，我不明白。这完全改变了任务。你在点击什么，你想隐藏/显示什么？如果您希望在 div#div1 中单击时隐藏 div#div1 中的文本，那么您应该考虑将文本包装在一个跨度或其他东西中，然后切换该跨度。
好的，我会说清楚的。从上面的 html 示例中，当我单击“div1”时，所有内容都会切换（）。当我单击“div1Child”时，该 div 不应切换。我正在尝试编写一个通用方法来在整个应用程序中工作。
1：您应该编辑问题。 2：将要切换的内容包装成一个跨度，并切换它而不是整个 DIV（假设您可以控制 HTML 标记）。否则我真不知道你隐藏了整个 DIV 一次之后会点击什么。

【解决方案3】：

$("leg1").next() 和 $("leg2").next() ?

见here

【讨论】：

【解决方案4】：

试试这个：

$("fieldset > div:first-child")

【讨论】：