Develop Reference

Using JQuery to replace text in HTML but ignoring certain HTML id's

So I'm currently using Handlebars to grab data from a JSON file to show its data on the screen. Right now it's looking similar to this:
<div class="content" id = "topic">
{{#each topics}}
<a href="{{topic}}" id = "ignore">
<h2>{{topic}}</h2>
</a>
{{/each}}
</div>
I want to replace specific characters within the word topic with another one, for example if the {{topic}} was "Hi%3F" I want to replace the "%3F" part with a '?' everywhere except the part with id="ignore". The replace function I'm using right now is:
$("#topic").html($("#topic").html().replace(/%3F/g,'?'));
this manages to replace everything so far, but I'm not sure how to get it to ignore the tags with the id="ignore". There's probably an easier way to make the link portion work like its supposed to but this is what I have gotten now and I don't want to mess around or change too much.
Thanks!

Is not legal html to duplicate Ids. Ids need to be unique. I'd suggest adding a class="unique" to your anchor tag and use
<div class="content" id = "topic">
<a href="Hi%3F" class = "topic">
<h2>Hi%3F</h2>
</a>
<a href="Hi%3F" class = "topic ignore">
<h2>Hi%3F</h2>
</a>
<a href="Hi%3F" class = "topic">
<h2>Hi%3F</h2>
</a>
<a href="Hi%3F" class = "topic ignore">
<h2>Hi%3F</h2>
</a>
</div>
<script>
$("a.topic").not(".ignore").each(function() {
$(this).html($(this).html().replace(/%3F/g,'?'));
});
</script>
http://jsbin.com/huquyufafe/edit?html,output

Referencing to HTML inner tag using JavaScript

I am trying to reference a Html tag within a tag using JavaScript
<a class="itemAnchor" role="menuitem" tabindex="-1" href="#" rel="async-post" ajaxify="12345">
<span class="itemLabel fsm">Delete This Photo</span>
</a>
As you can see, the span tag is within the anchor tag but I can only reference to the anchor tag because it has a unique 'ajaxify' value. At the moment I have the variable referencing the anchor tag but I do not know how to reference the span element. I attempted to use a.getElementsByTagName('span')[0] but it did not work.
Thank you.

You can use children or childNodes to get the child node
HTML Code
<a class="itemAnchor" role="menuitem" tabindex="-1" href="#" rel="async-post" ajaxify="12345" id="parentTag">
<span class="itemLabel fsm">Delete This Photo</span>
</a>
JS
var elem = document.getElementById('parentTag');
elem.addEventListener('click',function(){
alert(elem.children[0]);
})
a demo in this JSFIDDLE
Also please take a look at the difference between children & childNode

Not sure if JQuery is an option, but here's a resolution
$('a[ajaxify="12345"] span')
a references the anchor tag
[ajaxify="12345"] references the attribute with that value
Since there is no space it must be an anchor tag with that attribute
span looks for the span inside of the anchor tag with the attribute since it has a space before the span
Example:
http://jsfiddle.net/tkfde18r/

Javascript " getParent() " not working

I have to hide my parent span just above <a> tag and show the span just below it.(When clicking it on the <a> tag).
I need to use getParent() because their are another same <div>s repeating
My HTML is
<div class="Test">
<p class="commentBody">
<span class="view_more-comment">abcd...
<a class="view_more_link" href="javascript:void(0);" onclick="$(this).getParent().getNext().style.display='';$(this).getParent().style.display='none';">more</a>
</span>
<span class="view_more" style="display: none;">abcdefghijklmnopqrstuvwzyz...
<a class="view_less_link" onclick="$(this).getParent().getPrevious().style.display='';$(this).getParent().style.display='none';">less</a>
</span>
</p>
</div>
When I use this console shows the error
Uncaught TypeError: $(...).getParent is not a function
Any method to solve this problem?.

There is no getParent() in jQuery. Use:
onclick="$(this).parent().prev().show(); $(this).parent().hide();"
Docs
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
I'd recommend you to use on for event handling and not inline handlers
EDIT
Using jQuery:
$('.view_less_link').on('click', function() {
$(this).closest('.commentBody').find('.view_more-comment').show();
$(this).parent().hide();
});

Use .parent() instead of getParent().

Update your html as below and keep a similar class for both the links
DEMO
<span class="view_more-comment more">abcd...
<a class="view_link " href="javascript:void(0);">more</a>
</span>
<span class="view_more less" style="display: none;">abcdefghijklmnopqrstuvwzyz...
<a class="view_link" href="javascript:void(0);">less</a>
</span>
and then this JS
$('.view_link').on('click',function(){
$(this).parent().slideToggle(200);
$(this).parent().siblings().slideToggle(200);
});

jQuery target element using next() is not working

Hello I have the following HTML code, I would like to get the style of the 'p' element when clicking on the link.
<a href="#" onclick="var state = $(this).next().css('display'); alert(state);"/>Link
<p style="display:none;">Test Div</p>
My issue is that I get always 'undefined' instead of 'none'
This is just an exemple, I can use id or class to target the 'p' element but in production I have many links and they have no ids or classes that's why I want to use the 'this' to target the 'p' element.
How can I do that?
Thanks.

Because anchors aren't self-closing. Use:
Link
<p style="display:none;">Test Div</p>
jsFiddle example

on dom ready remove existing html attribute and add mine

My generated portion of page source is
<a target="_blank" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
and I need on page load to replace this a target with a rel so above link should be
<a rel="lightbox" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
I trid with after </body>
<script>
$(function() {
$('a[_blank]').removeAttr('_blank').attr("rel=","lightbox");
});
</script>

You need to use the attribute equals selector - you need to use the attribute name along with attribute value, also to remove you need to use the attribute name not value.
$('a[target="_blank"]').removeAttr('target').attr("rel","lightbox");
Your code looks for an anchor element with attribute _blank and then removes it, a anchor element like <a _blank href="/img/image001.png">
Also as #PaulDraper suggested move the script inside the body element

$(document).ready({
$('a[target=_blank]').attr('rel', 'lightbox');
})