CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-selectors
Ramsay
Ramsay

Reputation: 53

jQuery Selector corresponding image and li

I'm wanting to change the list-style of the li tag after the corresponding image has been clicked. This is what I have got so far.

jsFiddle

$('#foodOrder').click(function() {
      $(this " > li").css('list-style', 'disc');
    });
#foodOrder {
  list-style: circle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span id="foodOrder"><img id="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt="" /><li>CIABATTA</li></span>
      <span id="foodOrder"><img id="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt="" /><li>BAKERS BUN</li></span>

Upvotes: 2

Views: 45

Answers (1)

sergdenisov
sergdenisov

Reputation: 8572

Fixed your jQuery selector (syntax mistake) and HTML:

  1. <li> must be only in <ul>, <ol> or <menu>.
  2. <span> must contain only Phrasing content, <ul> is Flow content. You should use <div> then.

JSFiddle

$('.foodOrder').click(function() {
    $('li', this).css('list-style', 'disc');
});
.foodOrder li {
    list-style: circle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="foodOrder">
    <img class="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt=""/>
    <ul>
        <li>CIABATTA</li>
    </ul>
</div>
<div class="foodOrder">
    <img class="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt=""/>
    <ul>
        <li>BAKERS BUN</li>
    </ul>
</div>

Upvotes: 1

Related Questions