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 !

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 !

• javascript
• jquery

• code is missing? the function you are calling. – Jai Commented Dec 3, 2015 at 11:44
• document.getElementById('assignButton_NAGM15GRA4_HWK4OAC1').closest('a'); – Jaromanda X Commented Dec 3, 2015 at 11:44
• 1 when on page load, click, on mouseevents? – Jai Commented Dec 3, 2015 at 11:46
• 1 A jQuery method's not gonna work on a plain JS element, @Jaromanda X. – Shikkediel Commented Dec 3, 2015 at 11:49
• 1 @Shikkediel - I'll remember that next time ... oh ... wait .closest is a HTMLElement method ... p.s. IE must die – Jaromanda X Commented Dec 3, 2015 at 11:53

4 Answers 4

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.

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./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>

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./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>

Please try this:

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