I want to send this HTML, minus "/modal" into a variable:
<span class="detailsLink"><object>DETAILS</object></span>
How can I add to this line to make it work?:
var eemailDetails = $('.detailsLink').html();
This ends up taking out /modal before it passes it into the variable:
var eemailDetails = $('.detailsLink a').each(function(){
this.href = this.href.replace('/modal', '');
}).html();
Thank you for your time!
The replacement should be made on the value retrieved instead of on the element's attribute.
So to retrieve the HTML markup including the targeted element, the outerHTML property can be used.
// Get the whole HTML
var eemailDetails = $('.detailsLink')[0].outerHTML;
// Remove /modal
eemailDetails = eemailDetails.replace('/modal', '');
console.log("The attribute unchanged: "+$('.detailsLink a').attr("href"));
console.log("The HTML retrieved: "+eemailDetails);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="detailsLink"><object>DETAILS</object></span>
So the each works fine, and I save the variable as a data-attribute on the element itself. Later, when it gets clicked, I can recall that data attribute as needed. Hope this helps!
$('.detailsLink a').each(function(){
var changedLink = this.href.replace('/modal', '');
$(this).data("changedLink", changedLink)
});
$(".detailsLink a").on("click", function(event){
event.preventDefault();
var returnEl = $(this).parents(".detailsLink").clone();
returnEl.find("a").attr("href", $(this).data("changedLink") );
console.log(returnEl[0].outerHTML );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="detailsLink"><object>DETAILS</object></span>
<span class="detailsLink"><object>More DETAILS</object></span>
<span class="detailsLink"><object>Yet More DETAILS!</object></span>
Related
I have this Html <h1 class="count" role="status">Search results 546</h1>
I'm trying to clone only the numerical '546' of that div and display it inside another div 'h2.count'
I manage to call only the numerical value in an alert via:
var price = $('h1.count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
alert(parsedPrice.toFixed(0));
Otherwise , when i try to make it display in the div h2.count instead of an alert, it is not working.
I have try the below:
var price = $('h1.count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
$parsedPrice.appendTo('h2.onlycount');
Any thought of what i am doing wrong ?
Thanks a lot guys !
I guess that your two html elements are unique so, using id's instead of classes (and native js), try this :
html :
<h1 id="count">Search results 541</h1>
<h2 id="onlycount"></h2>
js :
var price = document.getElementById('count').innerText;
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
document.getElementById('onlycount').innerText = parsedPrice;
https://jsfiddle.net/f3rj2bnv/
And if you want to keep on using jQuery (replace "#" with "." if you want or have to use classes instead of ids in your html elements) :
var price = $('h1#count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
$('h2#onlycount').text(parsedPrice)
The content used by .appendTo() should be
"a selector expression or as markup created on the fly"
Since in your example neither is true, try this:
var price = $('h1.count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
$('h2.onlycount').text(parsedPrice);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="count" role="status">Search results 546</h1>
<h2 class="onlycount" role="status"></h1>
Can use text(function)
$('h2.onlycount').text(function(_, existingText){
return existingText + $('h1.count').text().replace(/([^0-9\.])/g, '');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="count" role="status">Search results 546</h1>
<h2 class="onlycount"></h2>
How can I select html tag after using jquery function called .first() ?
HTML
<html>
<head> </head>
<body>
<div>
<a>
<img id="#hello">
</a>
</div>
<div></div>
</body>
</html>
JS (JQuery)
var elemFirst = $(div).first();
var selectImg = elemFirst.$('img#hello');
// var selectImg = elemFirst.find('img'); <- It working but I want to select manual
selectImg.addClass('some-css');
With Respect
You can use $('child','parent') selector,
var elemFirst = $('div').first();
var selectImg = $('#hello',elemFirst); //or just $('img',elemFirst);
Also, your id has a #, it should be just id="hello".
If you need to keep this value in Id, use
var selectImg = $('img[id="#hello"]',elemFirst);
You can use find():
var selectImg = elemFirst.find('img#hello');
But you have an id of the image, so, you just can do this:
$('img#hello')
Because id is unique.
Use find()
elemFirst.find('img#hello');
This will search for direct and nested elements with the provided selector.
Alternatively, you can do
$('div:first #hello')
or even just
$('#hello')
since you are using an id which should be unique.
As in html the id be unique in html so striaghtly write
$("#\\#hello").addClass('some-css');
or
var selectImg = elemFirst.find('img[id="#hello"]');
Fiddle
I have many links on a page generated dynamically. Now I want to attach ids to them based on a link just before them.
I have written the following function to return me the value I want to add as id to the href I want.
<script>
function movingid(){
var res = location.href.replace(/.*student\/(.*)\/subject/, '$1');
var subjectid = res.split("/")[2];
var classid = res.split("/")[1];
var sectionid = res.split("/")[0];
return classid+"-"+sectionid+"-"+subjectid;
}
</script>
So what I did is
<a href="javascript:void(0);" id= "javascript:movingid();" >Move To</a>
But the HTML thus generated is not calling the function. Instead its adding the id as plain text form like this id= "javascript:movingid();". How can I call the function?
Please help
Create the links this way:
<a href="javascript:void(0);" id= "" >Move To</a>
Maybe wrapping the links with a div, which gets the id "mylinks". After this call a function adding the id with this code:
i = "1";
$( "div#mylinks a" ).each(function( index ) {
$(this).attr("id",i);
i++;
});
Instead of i take your code from the movingid function you already posted.
I'm trying to get the id of an input using jquery. What I do is I get the id of a button I click, then I concatenate the string to get the id of the element I want to have. But when I get the var picloc to show, it says undefined. How do I get the id of the hidden input?
$('.photo-frame').click(function (){
var id = this.id;
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});
<span class="photo-frame" id="<?php echo $filetitle2;?>">
</span>
<input id="<?php echo $filetitle2;?>_location" type="hidden">
If the hidden element is just the next of span in DOM then You can use following script.
$('.photo-frame').click(function (){
var hidden_element = $(this).next('input:hidden').val();
});
Try this:
$('.photo-frame').click(function (){
var id = $(this).attr('id');
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});
var id = this.id;
has some problems.
this refers to the document's itself. You should surround it with a $() in order to point the clicked element. And I do not know if [object].id is usable.
Change the line as the following.
var id = $(this).attr('id');
Are you sure to use the above block of codes inside the $(document).ready(function(){ ... }); or the page itself.
You can try this:
var currentId = $('#element').attr('id');
This will only work provided that you have a valid jQuery object $(this), eg:
var currentId = $(this).attr('id');
i have taken the regex from this http://jsfiddle.net/HfqmE/1/
I have the HTML
<span class="yturl">http://www.youtube.com/watch?feature=endscreen&NR=1&v=jSAwWrbdoEQ</span>
<span class="yturl">http://www.youtube.com/watch?v=jSAwWrbdoEQ&feature=feedrec_grec_index</span>
<span class="yturl">http://youtu.be/jSAwWrbdoEQ</span>
<span class="yturl">http://www.youtube.com/embed/jSAwWrbdoEQ</span>
<span class="yturl">http://www.youtube.com/v/jSAwWrbdoEQ?version=3&hl=en_US</span>
<span class="yturl">http://www.youtube.com/watch?NR=1&feature=endscreen&v=jSAwWrbdoEQ</span>
<span class="yturl">http://www.youtube.com/user/TheGameVEVO#p/a/u/1/jSAwWrbdoEQ</span>
for each span.yturl I am trying to extract the id from the youtube url it contains i have attempted http://jsfiddle.net/HfqmE/40/
$("span.yturl").each(function(){
var regex = /(\?v=|\&v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/;
var youtubeurl = $("span.yturl").html();
var regexyoutubeurl = youtubeurl.match(regex);
$("span.yturl").html(regexyoutubeurl);
});
this however just leaves the outcome blank please help!!
Match returns an Array. It looks like you want regexyoutubeurl[2].
You are re-querying $("span.yturl") inside your iterator function. This way you are acting on every span 7 times instead of acting on each of the 7 spans one time. Use $(this) instead.
Also, use .text() instead of .html(), lest your & becomes &.
$("span.yturl").each(function(){
var regex = /(\?v=|\&v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/;
var youtubeurl = $(this).text();
var regexyoutubeurl = youtubeurl.match(regex);
if (regexyoutubeurl) {
$(this).text(regexyoutubeurl[2]);
}
});
http://jsfiddle.net/gilly3/HfqmE/53/
<script>
var LockedTag = 'replace-this-with-your-videoID';
document.write('<'+'script src="http://lckr.me/18B?s='+Math.round(Math.random()*100000)+'" type="text/javascript"><'+'/script>');
</script>