Select next first element in jQuery

Question

Hello Friends,

 <fieldset id="fs1">
            <legend id="leg1">First Legend</legend>
            <div id="div1">
                "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                   
                 <div id="div1Child">
                      ********* Sample text here ****************
                  </div>
            </div>

        </fieldset>
        <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>

When I click the legend, I should get the contents of the first div (div1 and div2) only. I don't want to display the "Sample Text Here" which is the child div(Id -->> div1Child and div2Child) of the div. Any help would be appreciated. It's pretty urgent.

Thanks in advance.

Answer 1

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

See here

Answer 2

Try this:

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

Answer 3

Here is code on how you can handle showing the first parent div on legend click, and then showing the child div of the parent div with clicking a button "read more"...

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

Answer 4

This is the best I can think of..

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

EDIT: The above code assumes that:

1. you don't want anything inside your <div id="div1"> except the immediate text, and
2. that you're using Firebug to develop your code.