CODEWITHSUNDEEP
javascriptjquery
Corentin Branquet
Corentin Branquet

Reputation: 1576

Find element in list Jquery

I've this code

$('.item_has_children a').first().css("color","red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li class="item_has_children">
        <a href="#">Category 1</a>
        <ul class="submenu">
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
        </ul>
    </li>
    <li class="item_has_children">
        <a href="#">Category 2</a>
        <ul class="submenu">
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
        </ul>
    </li>
</ul>

I want to color the first links : "category 1" and "category 2".

I try but only the first link is coloring red.

Thanks for your help !

Upvotes: 0

Views: 42

Answers (3)

Tushar
Tushar

Reputation: 87203

No need to use javascript for this, you can use CSS.(Better Performance and User Experience)

.item_has_children > a {
    color: red;
}

> here will select direct children of .item_has_children element.

Demo:

.item_has_children>a {
  color: red;
}
<ul>
  <li class="item_has_children"> <a href="#">Category 1</a>

    <ul class="submenu">
      <li class="menu_item"> <a href="#">Hello</a>

      </li>
      <li class="menu_item"> <a href="#">Hello</a>

      </li>
    </ul>
  </li>
  <li class="item_has_children"> <a href="#">Category 2</a>

    <ul class="submenu">
      <li class="menu_item"> <a href="#">Hello</a>

      </li>
      <li class="menu_item"> <a href="#">Hello</a>

      </li>
    </ul>
  </li>
</ul>

Upvotes: 2

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can use immediate child selector > to target immediate anchor elements both using CSS and jquery.

Using CSS:

.item_has_children > a{color:red;}

Working Demo using CSS:

.item_has_children>a {
  color: red
}
<ul>
  <li class="item_has_children">
    <a href="#">Category 1</a>
    <ul class="submenu">
      <li class="menu_item">
        <a href="#">Hello</a>
      </li>
      <li class="menu_item">
        <a href="#">Hello</a>
      </li>
    </ul>
  </li>
  <li class="item_has_children">
    <a href="#">Category 2</a>
    <ul class="submenu">
      <li class="menu_item">
        <a href="#">Hello</a>
      </li>
      <li class="menu_item">
        <a href="#">Hello</a>
      </li>
    </ul>
  </li>
</ul>

Using Jquery:

$('.item_has_children > a').css("color","red");

Working Demo using Jquery:

$('.item_has_children > a').css("color","red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="item_has_children">
        <a href="#">Category 1</a>
        <ul class="submenu">
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
        </ul>
    </li>
    <li class="item_has_children">
        <a href="#">Category 2</a>
        <ul class="submenu">
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
        </ul>
    </li>
</ul>

Upvotes: 3

Sadikhasan
Sadikhasan

Reputation: 18600

operator > is used for select immediate started DOM element of selector.

$("li.item_has_children > a").css("color","red");

Upvotes: 1

Related Questions