Question

I have a problem with Masonry.

Here is where I need Masonry to be applied.

<ul class="text">
  <li> 
       <ul>
            <li> <!--Trying to apply masonry only  here-->
               <ul>
                  <li></li><!--Not here-->
               </ul>     
             </li>
            <li> <!--Trying to apply masonry only here-->
               <ul>
                  <li></li> <!--Not here-->
               </ul>     
             </li>
        </ul> 
   </li>
</ul> 

Only apply masonry on the li tag of second ul. If I don’t add a class to each of the li tag masonry won’t work properly because it will also add it the next ul >li. I can get it to work if I add a class to each of li like this, but it is kinda complicated to do with php.

<ul class="text">
      <li> 
           <ul>
                <li class="class"> <!--Trying to apply masonry only  here-->
                   <ul>
                      <li></li><!--Not here-->
                   </ul>     
                 </li>
                <li class="class"> <!--Trying to apply masonry only here-->
                   <ul>
                      <li></li> <!--Not here-->
                   </ul>     
                 </li>
            </ul> 
       </li>
    </ul>   

Using this:

   $("ul.text > li > ul").masonry({
                itemSelector : '.class'
            });

But I don’t want to add a class. I tried something like but it keeps applying masonry to all li tags.

    $("ul.text> li > ul").masonry({
        itemSelector : 'li'
    }); 

Is there a way to this without applying a class?

Thanks

Answer 1

From Docs

Filters item elements to selector. If not set, Masonry defaults to
using the child elements of the container.

Recommended to avoid Masonry using any other hidden elements in its
layout logic.

So i think you should remove itemSelector : 'li' According on documentation it is correct