javascript - How to find parent closest anchor tag - Stack Overflow

admin管理员组

文章数量:1345007

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

Share Follow edited Dec 3, 2015 at 11:42 Tushar 87.3k2121 gold badges163163 silver badges181181 bronze badges asked Dec 3, 2015 at 11:42 Tarun VishnoiTarun Vishnoi 10722 gold badges33 silver badges99 bronze badges 6

• 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

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 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"});

本文标签： javascriptHow to find parent closest anchor tagStack Overflow