CODEWITHSUNDEEP
jquerycss
MrCycling
MrCycling

Reputation: 3004

Targeting an outer parent's css with jQuery

We are updating our customer questionnaire, which is set up so that they can return and update or edit their answers. The basic html for each question (item) is below:

<div class="item">
  <span class="blue">The question ?</span>
  <div class="answer">
    Previous Answer <a href="" class="editlink">edit</a>
  </div> <!-- end div answer -->
  <div class="question">
    <textarea name="item-name" class="w90">Previous Answer or empty</textarea>
  </div> <!-- end div question -->
</div> <!-- end div item -->

When loading from the database, if there is a previous answer then the answer div will show and the question div will be hidden & populated with the previous answer. If the customer clicks the edit link, then the answer div should hide and the question div show.

If there was no previous answer then the question div will show and the empty answer div will be hidden.

My thoughts are to create two item classes, .item-answered & .item-not-answered to reflect the two states that answer and question can be. And then use those classes when the page is first built by PHP.

But I am trying to figure out how to use jQuery's automagical stuff to allow clicking on the editlink to change the css of the outer parent (labeled as "item" in my html above).

Upvotes: 0

Views: 92

Answers (1)

Rustkill
Rustkill

Reputation: 51

You're after the parent jQuery method. (http://api.jquery.com/parent/)

Try something like this:

<a href="#" onclick="$(this).parent().addClass('item-not-answered');" class="editlink">edit</a>

Upvotes: 1

Related Questions