Using Javascript to combine two <a> tags into one
I have something like this:
<a href="#"> ±</a>
<a href="#"> Link Here</a>
I want it to look like:
<a href="#"> ± Link Here</a&g开发者_高级运维t;
However, due to limitations within WordPress I'm a little unsure how to combine them JavaScript wise.
Here:
a1.textContent += a2.textContent;
a2.parentNode.removeChild(a2);
where a1
and a2
are the references to those two ANCHOR elements. (Once you get the reference to the first anchor, you can get the reference to the second one like so: a1.nextElementSibling
.)
Live demo: http://jsfiddle.net/simevidas/QWQy8/
Update: See @Šime Vidas' comment for a slimmer method.
Live Demo
jQuery:
$('a + a').prev().html(function() {
$(this).html($(this).html() + $(this).next().html());
$(this).next().remove();
});
HTML:
<a href="#"> ±</a>
<a href="#"> Link Here</a>
<a href="#"> ±</a>
<a href="#"> Another Link Here</a>
Output:
<a href="#"> ± Link Here</a>
<a href="#"> ± Another Link Here</a>
精彩评论