Jquery - attach 2 objects to make a clickable link - javascript

Sorry in advance as I know how basic this question is but I'm struggling to find the answer to this.
I'm trying to connect two objects together, some text & a url and send them to a class.
The code I have that's working just fine is only using one of the objects at the moment;
$('.myclass').text(obj.mytext);
I'm stuck on how to attach the second object (obj.myurl) to this so it output's the text as a clickable link?

You shoule
$('.myclass').html('' + obj.mytext + '');
or
$('<a/>', { href : obj.myurl, text: obj.mytext }).appendTo('.myclass')

Try:
$('.myclass').text(obj.mytext).attr('href',obj.myurl);

Related

How do I apply a class to all links on a specific page using JavaScript?

I have a page on WordPress with hundreds of links and I'd like to style them all with a CSS class without having to add the class to each link, line by line, and want to use JavaScript to do it.
How can I achieve this?
I want only https://staging.startupdevkit.com/resource-library-version-1/ to be affected using my CSS class, "link-style"
I found a response on another similar thread with this:
document.querySelectorAll('a[href="'+document.URL+'"]').forE‌​ach(function(elem){e‌​lem.className += ' current-link')});
I tried it, probably incorrectly, with this:
document.querySelectorAll('a[href="'*https://staging.startupdevkit.com/resource-library-version-1/*'"]').forE‌ach(function(elem){e‌lem.className += 'link-style')});
Am I doing it wrong or am I not using the correct solution, or both?
Thank you for your help in advance!
const URL = "https://staging.startupdevkit.com/resource-library-version-1/";
document
.querySelectorAll(`a[href="${URL}"]`)
.forEach(element => element.classList.add('link-style'));
try this
[...document.querySelectorAll('a[href^="https://staging.startupdevkit.com/resource-library-version-1/"]')].forE‌ach(function(elem){e‌lem.classList.add('link-style')});
it checks all href starting from
https://staging.startupdevkit.com/resource-library-version-1/

Remove numbers on a html page using jQuery

I want to make some jQuery actions on a html page :
The page is : http://download.eclipse.org/jetty/stable-9/xref/org/eclipse/jetty/embedded/HelloHandler.html
my aim is to remove the numbers (represented by the class jxr_linenumber)
What I've tried is :
$(".jxr_linenumber").text("")
However google chrome said : Uncaught TypeError: $(...).text is not a function(…)!!
Even more ... when I tried this command $('a'), it returns with one element only ... however the page contains several "a" tags
Here is two screenshots to explain the issue and my goal
The screenshot of the actual page :
My goal = remove the numbers using jquery ... the numbers are in the red box ....
So the result should be as follow :
Any help ? thanks
The .remove() should do the trick, but my guess is that its causing some issues since jquery isnt available on the page, and injecting it after, might be why its only removing one at a time.
You could use plain javascript like this:
var elements = document.getElementsByClassName("jxr_linenumber");
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
Try the Jquery function .remove( ) instead. Something like
$(".jxr_linenumber").remove( );
You use...
$(".jxr_linenumber").html("")
but in the end, the best answer is to use $(".jxr_linenumber").remove() since you don't want empty 'a' tags on your page. That's just bad design.

Jquery onClick not Working by Class Name

Problem is actually pretty simple , but i don't know why can't i get it to work.
i want to add a classname to my button on Click by using its current class btn-cat.I am just a student learning not professional so please keep that in mind before make any acquisitions.
Here is the Link . where am i wrong?
Note: I can't find any good or valid way to post jsfiddle link that's why i shorten the link to workaround Here is SO question for that.
Change $('this') to $(this), otherwise you are passing to jQuery a string instead of DOM element in question. Demo - Fiddle

Adding to/editing the URL bar of a webpage without deleting what's already there.

I need to add some text to a URL bar without deleting what's already there(as I've mentioned in the title). Basically, I have eight or so hashes(/one/, /two/, /three/, etc).
I have to add these to the URL bar without deleting the previous hashes that are already in there. For example, I could have a button that adds "/two/" to the URL, but what if "/one/" is already there? I need it to make it so that it just adds the new hash after the one one, like this - "/one/two/three/".
I've tried using
Hide "one"<br/>
and
Hide "two"<br/>,
but unfortunately when I use the second one after the first, it just replaces "/one/" with "/two/".
Any suggestions would be great. Let me know if I need to provide some more context, I'm not quite sure what's relevant to this question in my code.
Thanks in advance, guys!
You just need to use a function
<a onclick="addHash('/one/');">One</a>
<a onclick="addHash('/two/');">Two</a>
function addHash( hash ) {
window.location.hash = window.location.hash + hash;
}
You will probably need to do some checking in the addHash function to see if it exists already, but thats a good place to start.
Maybe a little more description on what you are trying to achieve here?
Are you just trying appearance of the URL, or are you trying to navigate to pages with these arguments?
I'm sure PHP would solve this with the following but I'm not sure why you would use it.
One
Two
If you're using jQuery you could do:
One
Two
<script>
$(function(){
$('.addToUrl').click(function(){
var href = $(this).attr('href');
window.location.href = window.location.pathname + href;
});
});
</script>

Finding child from parent of clicked element

I'm currently building an event table that will feature a "share" button. Once the user clicks on the share button I want to find text value from that particular table and store them in a variable so that I can use them in my next step. Basicly when I click the share button I want to find the parent element that wraps the particular table and then find text values from each particular cell and store that in a variable. In my JSFiddle I have setup to display the results in the resultbox. http://jsfiddle.net/Ak84L/5/
$("#shareButt").click(function(){
var date = $(this).parent('.even_table').find('date').text();
$(".resultbox").text("date"+date);
});
First change shareButt and date to values of class attribute instead of id, because IDs have to be unique.
And use this code:
$(".shareButt").click(function () {
var date = $(this).closest('.event_table').find('.date').text();
$(".resultbox").text("date" + date);
});
DEMO
First DON'T use same id. Use class instead. Go this way:
js
$(".shareButt").click(function(){
var date = $(this).parents(".event_table").find(".date").text();
$(".resultbox").text("date"+date);
});
fiddle
it would be much simpler to append a custom data tag to the element than to muck around with artsy fartsy jquery calls.
If its good enough for major web frameworks like angular.js, jade, bootstrap, etc. why do many people continue to attempt to reinvent the wheel to create the most complicated solution.
JS FIDDLE EXAMPLE
HTML
<div class="shareButt" date-data="12.5.2014">SHARE</div></td>
jQuery
$(".shareButt").click(function(){
$('.resultbox').text('date' + $(this).attr('date-data'));
});

Categories