How to target one element using jQuery
I am trying to set up an unordered list of ingredients. The ingredient ( <li>
) should be yellow when clicked background-color
.
In the code below, I can click the ingredients and change the background color. However, I am unable to target a single item. How can I make it so that the background color changes when clicked <li>
?
$('#lili>li').click(function () {
$('li').css('background-color', 'yellow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ingred">
<h3>INGREDIENTS</h3>
<ul id="lili">
<li>3 Tbsp soy sauce</li>
<li>1 teaspoon brown sugar</li>
<li>1 Tbsp olive oil</li>
<li>2/3 cup diced red onion</li>
<li>2/3 cup diced red bell pepper</li>
<li>2 cloves garlic, minced</li>
<li>1-inch piece of ginger, grated</li>
<li>3 eggs, well beaten</li>
<li>4 cups day old cooked white rice (from about 2 cups of raw rice)</li>
<li>1 cup frozen peas, thawed</li>
<li>2 cups cooked salmon in large chunks</li>
<li>2 green onions, thinly sliced, including the greens</li>
<li>Cilantro (or parsley) for garnish</li>
</ul>
</div>
+3
source to share
3 answers
Use this
li to target click, li
will target everythingli
$(document).ready(function() {
$('#lili>li').click(function() {
$(this).css('background-color', 'yellow');
//-^-----
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>INGREDIENTS</h3>
<ul id="lili">
<li>3 Tbsp soy sauce</li>
<li>1 teaspoon brown sugar</li>
<li>1 Tbsp olive oil</li>
<li>2/3 cup diced red onion</li>
<li>2/3 cup diced red bell pepper</li>
<li>2 cloves garlic, minced</li>
<li>1-inch piece of ginger, grated</li>
<li>3 eggs, well beaten</li>
<li>4 cups day old cooked white rice (from about 2 cups of raw rice)</li>
<li>1 cup frozen peas, thawed</li>
<li>2 cups cooked salmon in large chunks</li>
<li>2 green onions, thinly sliced, including the greens</li>
<li>Cilantro (or parsley) for garnish</li>
</ul>
If you want to switch the effect use the following,
$(document).ready(function() {
$('#lili>li').click(function() {
$(this).toggleClass('toggle');
});
});
.toggle {
background-color: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>INGREDIENTS</h3>
<ul id="lili">
<li>3 Tbsp soy sauce</li>
<li>1 teaspoon brown sugar</li>
<li>1 Tbsp olive oil</li>
<li>2/3 cup diced red onion</li>
<li>2/3 cup diced red bell pepper</li>
<li>2 cloves garlic, minced</li>
<li>1-inch piece of ginger, grated</li>
<li>3 eggs, well beaten</li>
<li>4 cups day old cooked white rice (from about 2 cups of raw rice)</li>
<li>1 cup frozen peas, thawed</li>
<li>2 cups cooked salmon in large chunks</li>
<li>2 green onions, thinly sliced, including the greens</li>
<li>Cilantro (or parsley) for garnish</li>
</ul>
+4
source to share