CODEWITHSUNDEEP
javascriptjquery
Tarun Vishnoi
Tarun Vishnoi

Reputation: 107

How to find parent closest anchor tag

I am trying to change background color of an anchor tag. And to find this anchor tag I have a span with its id. Then how can I find this anchor tag. Html code is below

<li class="fa-2x lesson_strand active">
    <a onclick="window.open('/wwtb/api/viewer.pl?uid=demo_user&cid=1&wid=NAGM15GRA4_HWK4OAC1&role=Student','_blank','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=1014,height:655,left=150,top=50,titlebar=yes')" href="#">
        <b class="fa_text">Domain 4.OA Cluster 1 Quiz (Homework)</b>
    </a>
    <a onclick="window.open('/ePC/ePlannerAssessment.do?isbn=9780544349179&isSoar=0&toolType=12&uniqueID=NAGM15GRA4_HWK4OAC1&resourceBUID=NAGM15GRA4_HWK4OAC1&nextGenTool=WB%20HTTP/1.1','_blank','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=1014,height:655,left=150,top=50,titlebar=yes')"
    href="#">
        <span id="assignButton_NAGM15GRA4_HWK4OAC1" class="assignButton" onclick="assignclicksToButton(event)">Assign</span>
    </a>
</li>

I am trying to change color of first anchor tag and I have only span id. How can I do that . Please help.

Thanks !

Upvotes: 4

Views: 10203

Answers (4)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Take closest li and then find the first a of this li. Hope the code snippet given below will help you.

$('#assignButton_NAGM15GRA4_HWK4OAC1').closest('li')
.find('a:first').css('background-color', 'green');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="fa-2x lesson_strand active">
    <a onclick="window.open('/wwtb/api/viewer.pl?uid=demo_user&cid=1&wid=NAGM15GRA4_HWK4OAC1&role=Student','_blank','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=1014,height:655,left=150,top=50,titlebar=yes')" href="#">
        <b class="fa_text">Domain 4.OA Cluster 1 Quiz (Homework)</b>
    </a>
    <a onclick="window.open('/ePC/ePlannerAssessment.do?isbn=9780544349179&isSoar=0&toolType=12&uniqueID=NAGM15GRA4_HWK4OAC1&resourceBUID=NAGM15GRA4_HWK4OAC1&nextGenTool=WB%20HTTP/1.1','_blank','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=1014,height:655,left=150,top=50,titlebar=yes')"
       href="#">
        <span id="assignButton_NAGM15GRA4_HWK4OAC1" class="assignButton" onclick="assignclicksToButton(event)">Assign</span>
    </a>
</li>

Upvotes: 1

Atif Tariq
Atif Tariq

Reputation: 2772

Please try this:

$("#assignButton_NAGM15GRA4_HWK4OAC1").closest('a').css({"background-color": "red"});

Upvotes: 0

Oss
Oss

Reputation: 4322

Use .closest() (jQuery docs link)

$(this).closest('a');

From the API docs:

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Upvotes: 4

ozil
ozil

Reputation: 7117

use .parent() then .prev methods $("#assignButton_NAGM15GRA4_HWK4OAC1").parent().prev().css({"color": "red", "border": "2px solid red"}); 

$("#assignButton_NAGM15GRA4_HWK4OAC1").parent().prev().css({"color": "red", "border": "2px solid red"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="fa-2x lesson_strand active">
  <a onclick="window.open('/wwtb/api/viewer.pl?uid=demo_user&cid=1&wid=NAGM15GRA4_HWK4OAC1&role=Student','_blank','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=1014,height:655,left=150,top=50,titlebar=yes')" href="#">
    <b class="fa_text">Domain 4.OA Cluster 1 Quiz (Homework)</b>
  </a>
  <a onclick="window.open('/ePC/ePlannerAssessment.do?isbn=9780544349179&isSoar=0&toolType=12&uniqueID=NAGM15GRA4_HWK4OAC1&resourceBUID=NAGM15GRA4_HWK4OAC1&nextGenTool=WB%20HTTP/1.1','_blank','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=1014,height:655,left=150,top=50,titlebar=yes')"
  href="#">
    <span id="assignButton_NAGM15GRA4_HWK4OAC1" class="assignButton" onclick="assignclicksToButton(event)">Assign</span>
  </a>
</li>

Upvotes: 2

Related Questions