How to hide all divs in jquery of particular div?

Question

I have HTML like below

<div  id="L0" >
    <div id="P0">
      //code
    </div>
    <div id="P1">
         //code
    </div>
    <div id="p2">
           //code
    </div>
</div>
<div  id="L1" >
    <div id="P0">
      //code
    </div>
    <div id="P1">
         //code
    </div>
    <div id="p2">
           //code
    </div>
</div>

So I want to hide all inner P divs of particular L. I have tried below code but it is not working.

$('#L0 div[id^=P]').hide();

Answer 1

Add a class to your top level DIV's for example:

<div id="L0" class="top-div">
    <div id="P0">1</div>
    <div id="P1">2</div>
    <div id="p2">3</div>
</div>
<div id="L1" class="top-div">
    <div id="P0">4</div>
    <div id="P1">5</div>
    <div id="p2">6</div>
</div>

Now you can easily select all DIV's with the class top-div and hide their children, In this case the inner divs:

$('div.top-div').children().hide();

If you want to hide the inner divs of only one outer (L) div use the code below:

$('div#L0').children().hide();// for your first div L0
$('div#L1').children().hide();// for your second div L1

Answer 2

This worked for me. Two of them are not hiding because they are small letter p

$('div[id^="P"]').hide();
$('div[id^="p"]').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div  id="L0" >
    <div id="P0">
      //code
    </div>
    <div id="P1">
         //code
    </div>
    <div id="p2">
           //code
    </div>
</div>
<div  id="L1" >
    <div id="P0">
      //code
    </div>
    <div id="P1">
         //code
    </div>
    <div id="p2">
           //code
    </div>
</div>

Answer 3

just hide your L0 div and all inner P will hide automatically for particular Div try following code

$('#L0').hide();

Answer 4

Last div id p is small char and in selector used CAPITAL P char

<div id="p2">

change

<div id="P2">

Answer 5

$('#L0 div[id^=P], #L0 div[id^=p]').hide();