I've the elements as follows,
<div id="pager">
First
Previous
<a class="" href="/somepath/1">1</a>
<a class="Current" href="/somepath/2">2</a>
<a class="" href="/somepath/3">3</a>
Next
Last
</div>
and I want it to be changed as follows within browser.
<div id="pager">
First
Previous
<a class="" href="/somepath/1?a=text">1</a>
<a class="Current" href="/somepath/2?a=text">2</a>
<a class="" href="/somepath/3?a=text">3</a>
Next
Last
</div>
So that I can use the "a" data values to next page.
Can any one give me the code, which does the appends inside
div id="pager" -> <a> -> href="
and i wants to remove the added text with another onChange event.
Thanks in advance
Since jquery is tagged :
$('#pager a').each(function(){
this.href += '?a=text';
})
Vanilla JS would look like this :
var a = document.getElementById('pager').getElementsByTagName('a'),
length = a.length;
for(var i=0; i< length; i++){
a[i].href += '?a=text';
}
.attr(), like many jQuery functions, can take a function argument that modifies the existing value:
$('#pager a').attr('href',function(i,str) {
return str + '?a=text';
});
$('#pager a').each(function() {
$(this).attr('href', $(this).attr('href') + '?a=text');
});
Simply use the attr property. Example :-
$("a").attr("href", "http://www.google.com/")
This will do the job.
$("#pager").find("a").each(function(){
var $this=$(this);
$this.attr("href",$this.attr("href")+"?a=text");
})
you can use attr method
$('a').attr('href', '/somepath/1?a=text');
And if you want to change the href of a specific <a> give that '' a unique id and than change its href as follows
$('#link').attr('href', '/somepath/1?a=text');
Try this code :
$('#pager a').each(function(){
this.href += '?a=text'
})
Related
I would like to add <a href='https://google.com'> after a <div>.
Here is what I've been trying:
http://jsfiddle.net/L29e4ftj/
Is there someone who could help me out please?
Thank you!
Is that how do you want this ?
<div id="autoComplete_list">
<div data-id="2" class="autoComplete_result">
<span class="autoComplete_highlighted">google</span>
</div>
</div>
<script>
var aUrl = document.createElement("a");
aUrl.setAttribute("href", "https://google.com");
aUrl.innerHTML = "<span class='autoComplete_highlighted'>Google</span>"
document.querySelector("#autoComplete_list").appendChild(aUrl);
</script>
Problem
The way you are selecting the div is slightly wrong.
You use getElementsByClassName() which returns a list of elements, not a single element, so you will get [div] instead of div.
Solution
You can either get the first element of that list:
document.getElementsByClassName("autoComplete_result")[0]
or use the simpler Document.querySelector:
document.querySelector(".autoComplete_result") (which returns only one element, not an array).
window.onload=function() {
// Notice the [0] which selects ONLY the first matched element
var mydiv = document.getElementsByClassName("autoComplete_result")[0];
var a = document.createElement('a');
a.setAttribute('href',"https://www.google.com");
a.innerText = "google link";
mydiv.appendChild(a);
}
Seems that the getElementsByClassName is not returning as expected, so the appendChild is not working. I tried using querySelector and is working fine. Take a look at the code snippet below:
var mydiv = document.querySelector('.autoComplete_result');
var a = document.createElement('a');
a.setAttribute('href',"https://www.google.com");
a.innerText = "google link";
mydiv.appendChild(a);
<body>
<div id="autoComplete_list">
<div data-id="2" class="autoComplete_result">
<span class="autoComplete_highlighted">goog</span>le
</div>
</div>
</body>
I am trying to replace string anything after RIGHTS_TARGET= with www.domain.com. How to find particular place replace from there?
<a href="/secured/login/rightsLogin?v=cls&command=logout&
RIGHTS_TARGET=Replace Old url with new" style="" id="loginLink"><span></span>Sign Out</a>
Try this
var x = $("#loginLink").attr("href");
var s = x.split("RIGHTS_TARGET=")[0]+"RIGHTS_TARGET=www.domain.com";
$("#loginLink").attr("href",s);
The best way is to use regex to replace the specific value.
var a = $('a').attr('href', function(i, href) {
return href.replace(/RIGHTS_TARGET=(.*)/.exec(href)[1], 'www.domain.com');
});
alert(a.attr('href'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>Sign Out
My goal is to change text in span .name into element with link-
<div class="input-wrap">
<span class="name">favorite 1</span>
</div>
How can I use JS to add link to this element so as it looks like that:
<div class="input-wrap">
<span class="name">favourite 1</span>
</div>
.wrapInner() wraps element around passed value.
Try this:
$(".name").wrapInner("<a href='/specyficwebsite.html'></a>");
Fiddle here.
You could:
$('span.name').html(function () {
return $('<a>').attr('href', '/specyficwebsite.html').text($(this).text());
});
See demo jsFiddle here.
Generated HTML:
<span class="name">favourite 1</span>
You can do this way:
$(".name").html(function(){
$(this).wrap("<a href='/specyficwebsite.html'></a>")
})
Demo Fiddle
try something like this
$(function(){
var link = ''+$('.name').text()+'';
$('.name').html(link);
})
Try with .wrapInner() like
$(".name").wrapInner( '' );
See this FIDDLE You can also try like
var txt = $('.name').text();
$('.name').html('' + txt + '');
Or directly
$('.name').html('' + $('.name').text() + '');
Try this FIDDLE
Heres the FIDDLE
var $name = $(".name");
var txt = $name.text();
$name.html('' + txt + '');
I've got a list and I want to input a data from it by the table of arrays and I don't have idea how .
Here is the code and my attempts:
HTML:
<body>
<div class="top-menu style4"style="margin-top:300px;">
<ul class="top-menu-main">
<li>
<ul class="top-submenu">
<li><a class="up_items"style="padding-top:5px;">SEMINARS</a></li>
<li><a class="up_items"style="padding-top:5px;">STATUTES</a></li>
<li><a class="up_items"style="padding-top:5px;">RÉSUMÉ</a></li>
<li><a class="up_items"style="padding-top:5px;">ADR & PPCs</a></li>
<li><a class="up_items"style="padding-top:5px;">PREPARATIONS</a></li>
<li><a class="up_items"style="padding-top:5px;">MUSINGS</a></li>
<li><a class="up_items"style="padding-top:5px;">GLOSSARY</a></li>
<li><a class="up_items"style="padding-top:5px;">AWARDS</a></li>
</ul>
<a style="width:100px;text-align:center;text-align:center;font-family:arial;font-size:0.7em;font-weight:bold;border-top:none;">START</a>
</li>
</ul>
</div>
</body>
I've tried to do something with this script but what i got is a simple list without any slide, css elements and so on which i included in my code ..
JS:
<script type="text/javascript">
function makeMenu() {
var items = ['Start','Trident','Internet Explorer 4.0','Win 95+','5','5'];
var str = '<ul><li>';
str += items.join('</li><li>');
str += '</li></ul>';
document.getElementById('jMenu0').innerHTML = str;
}
window.onload = function() { makeMenu(); }
$(document).ready(function(){
$("#jMenu").jMenu();
})
</script>
There are some mistakes in your code.
Use the same jQuery ready function to load menu.
Use .class selector or #id to select the menu.
Don't include two times the UL tag.
Here is your code working:
function makeMenu() {
var items = ['Start','Trident','Internet Explorer 4.0','Win 95+','5','5'];
var str = '<li>';
str += items.join('</li><li>');
str += '</li>';
$('.top-menu-main').html(str);
}
$(document).ready(function(){
makeMenu();
$(".top-menu-main").menu();
});
You can check it here:
http://jsbin.com/irasof/1/edit
You haven't assigned an id to your unordered list.
the call
$("#jMenu").jMenu();
expects to find an element with the id jMenu.
Try adding that id in your js function
var str = '<ul id\"jMenu\"><li>';
take a look at the docs of that plug-in
And the line
document.getElementById('jMenu0').innerHTML = str;
tries to add the generated HTML inside an element with the id jMenu0. The HTML code you are showing does not contain such an element. You need to add it first, maybe somthing like that will be enough
<div id="jMenu0" />
I'm trying to add the content of each span along with the value in the title attribute.
<div id="group-wrap" class="group">
<span class="lbracket" title="&f">(</span>
<span class="grouptitle" title="&f"> Group </span>
<span class="rbracket" title="&f">) </span>
<span class="username" title="&f"> Username </span>
<span class="col" title="&f">:</span>
<span class="text" title="&f"> Helo There! </span>
</div>
Here is what I have so far:
var str = [];
$('#group-wrap span').each(function(){
str.push($(this).attr('title'));
});
alert(str.join(''));
});
http://jsfiddle.net/B9QeK/3/
The output is &f&f&f&f&f (the value of each title attribute), but the expected output has the value, plus the content that is in the span. The value of the attribute should be appended before the content.
&f(&fGroup&f)&fUsername: &f text
How can I get this result?
Looks like you are looking for
str.push( this.getAttribute('title'), this.textContent || this.text );
As for performance reasons, you should not re-create a jQuery object for every single iteration. Even better, don't use jQuery at all to receive those values.
JSFiddle
And by the way, you can make usage of jQuerys .map() to do it a bit more elegant:
jQuery(function($){
var str = $('#group-wrap span').map(function(){
return this.getAttribute('title') + this.textContent || this.text;
}).get();
alert(str.join(''));
});
JSFiddle
Reference: .map()
jQuery(function($){
var str = [];
$('#group-wrap span').each(function(){
str.push($(this).attr('title') + $(this).text());
});
alert(str.join(''));
});
Working JSFiddle
text:
Description: Get the combined text contents of each element in the set of matched elements, including their descendants.
docs
Just use the text method to get the text content of each span:
var str = [];
$('#group-wrap span').each(function(){
//Push value of title attribute and text content into array:
str.push($(this).attr('title') + $(this).text());
});
alert(str.join(''));
});
Your line
str.push($(this).attr('title'));
Should look like:
str.push($(this).attr('title') + $(this).text());
Although, this is making two identical calls $(this), so you might consider caching:
var $this = $(this)
str.push($this.attr('title') + $this.text());
var str = "";
$('#group-wrap span').each(function(){
str+=$(this).attr('title')+$(this).text();
});
alert(str);
});