Question

<div class='main'>

<div>
        <div>
            <button></button>
        </div>
</div>
<ul>    
        <li>
            <img />
        </li>

        <li>
            <h1></h1>
        </li>

</ul>
<div>
        <span>
            <a href=""></a>
        </span>
</div>

</div>

Question: I want to select buttons, img, h1 and a. The only way to do this in jQuery (as I know) is $(.main).children().children().children().
But is there another way to select those elements in jQuery? (to not use so many times children())

Answer 1

<div class="main">
   <div>
      <div>
         <button class="mustSelect"></button>
      </div>
   </div>
   <ul>
      <li>
         <img class="mustSelect" />
      </li>
      <li>
         <h1 class="mustSelect"></h1>
      </li>
   </ul>
   <div>
      <span>
      <a href="" class="mustSelect"></a>
      </span>
   </div>

Add the class(class=”mustSelect”) to the elements you need. Then in the js you can refer those elements as below.

$('.mustSelect')

If you are unable to add a class, use the following

$("button, img , h1 , a ", ".main")

It tells jquery to select the whatever the button, img , h1 , a in the .main class.

Hope this will help you out. If you have any questions please don’t hesitate to ask. Thanks