Develop Reference

Trim partial link in jQuery

I am trying to remove the start of a link in jQuery. I have tried to inject the following function but it doesn't work. What am I doing wrong?
JS
$(function() {
$('link-active').each(function() {
$(this).attr('href').remove('http://www.linkplus.com/xQWE=');
});
});
HTML
<td class="block">
<a class="link-active"
href="http://www.linkplus.com/xQWE=http://www.example.com">Get</a>
</td>

When you're trying to search for classes, make use of dot (.), $('link-active') should be $('.link-active').
About .remove(): this one will remove one element of the DOM; not applicable in this case.
Solution: You will need to use .attr() to return AND update the href attribute of your tag, .replace() method should help.
$(function() {
$('.link-active').each(function() {
let href = $(this).attr('href'); //returns href value
let removableUrl = 'http://www.linkplus.com/xQWE=';
href = href.replace(removableUrl, ''); //replace the url you don't want with ''
$(this).attr('href', href); //update href value
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="block">
<a class="link-active"
href="http://www.linkplus.com/xQWE=http://www.example.com">Get</a>
</td>
Note: There's other methods to separate the url you don't want (if the url stay in the same format), check for:
.substring(): href = href.substring(removableUrl.length);
.split(): href = href.split('=')[1];
.replace() with regex: href = href.replace(/.*\=/,'');

Amend $('link-active') to $('.link-active').

First thing is While representing a class in jQuery try using dot notation..
$(function() {
$('.link-active').each(function() {
$(this).attr('href').remove('http://www.linkplus.com/xQWE=');
});
});

It's convenient to use attr method like this:
$(function() {
$('.link-active').attr('href', function(i, href) {
return href.replace('http://www.linkplus.com/xQWE=', '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link-active" href="http://www.linkplus.com/xQWE=http://www.example.com">Get</a>

Change your code on line 3 to
$(this).attr('href', $(this).attr('href').replace('http://www.linkplus.com/xQWE=', ''));
Full code should be
$(function() {
$('link-active').each(function() {
$(this).attr('href', $(this).attr('href').replace('http://www.linkplus.com/xQWE=', ''));
});
});

remove is not being used correctly here, as that method is meant to remove elements from the DOM and accepts a selector string as its argument.
Try something like this instead:
$(function() {
$('.link-active').each(function() {
var href = $(this).attr('href');
var strToReplace = 'http://www.linkplus.com/xQWE=';
$(this).attr('href', href.replace(strToReplace, ""));
});
});
Above we use replace to replace the start of the link with an empty string.

You have to get the string, replace it and then set it again.
Something like this:
$(function() {
$('link-active').each(function() {
replacement = 'http://www.linkplus.com/xQWE=';
url = $(this).attr('href');
$(this).attr('href', url.replace(replacement, ''));
});
});

Hover text in jQuery

how to use hover text function on any link in jQuery ?
this is my code.
<a class="hover" href="#" >Google</a>
$(".hover").mousemove(function () {
var hovertext= $(this).attr('hovertext');
});

Check this :
document.getElementById("hover").onmousemove = function() {myFunction(event)};
function myFunction(e) {
document.getElementById("hover").text = "hovered"
}
<a id="hover" class="hover1" href="#" >Google</a>

$(".hover").mousemove(function () {
var hovertext= $(this).attr('hovertext');
this.attr{title: hovertext};
});
The code I added is just the final line. Javascript calls hovertext the "title" and you set it as an attribute of the node.

Binding One Click Event to three different links

I wrote a simple script similar to this example. The problem is the click event is only binding to the first #id in the conditional statement. My thought on why this is occurring is there is nothing in each statement to associate the ID with the class in the click function, but when I tried to add a var, the click did not fire at all. Please tell me where I have gone wrong.
Thanks
$(document).ready(function(){
$('.someclass').bind('click', function() {
if('#id1')
{
window.location = "someURL";
}
else if('#id2')
{
window.location = "someURL2";
}
else if('#id3')
{
window.location = "someURL3";
}
});
});

You can check their id's like this
$(document).ready(function () {
$('.someclass').bind('click', function () {
if(this.id === 'id1') {
window.location = "someURL";
} else if(this.id === 'id2') {
window.location = "someURL2";
} else if(this.id === 'id3') {
window.location = "someURL3";
}
});
});

Consider:
<span data-url="someURL">Link 1</span>
<span data-url="someURL2">Link 2</span>
And then:
$wrapper.on( 'click', 'span', function () {
window.location = $( this ).data( 'url' );
});
where $wrapper contains the DOM element which in turn contains all your "links".
The idea here is to separate the data from the JavaScript code (= the behavior). Your URL's should be in the DOM - you can use data-* attributes to store them (as I've shown above).

Since you already use ids for your elements you should use them seperately to bind the click functions. It's easier and it works :)
$(document).ready(function(){
$('#id1').click(function(){
window.location = "someURL";
});
$('#id2').click(function(){
window.location = "someURL2";
});
$('#id3').click(function(){
window.location = "someURL3";
});
});
If you like the original way better (you shouldn't ;-) ) then try this:
if( $(this).attr("id") == 'id1' )
{
window.location = "someURL";
}

I think you are over thinking things and also not knowing what is out there for you to use. I would leverage the data attribute on your links. I'm going to assume they are not your typical A tag with an HREF because you should not use JavaScript if so.
<div data-url="http://www.someurl1.com">...</div>
<div data-url="http://www.someurl2.com">...</div>
<div data-url="http://www.someurl3.com">...</div>
<script>
$('body').on('click','div[data-url]', function(ev) {
ev.preventDefault();
window.location = $(this).data('url');
}
</script>

If my understanding is correct for your requirement, you have a css class called "someclass" which has hyperlinks into it. You need to set the URL of those hyperlinks dynamically through jQuery, am I correct? If so, then you can try the following code:
<script type="text/javascript" src="../Scripts/jQuery/jquery-1.7.2.js"></script>
<script type="text/ecmascript">
$(document).ready(function () {
$(".someclass > a").live("click", function () {
var currentID = $(this).attr("id");
if (currentID == "id1") {
window.location = "http://google.com";
}
else if (currentID == "id2") {
window.location = "http://stackoverflow.com";
}
else if (currentID == "id3") {
window.location = "http://jquery.com";
}
});
});
</script>
<div>
<div class="someclass">
<a id="id1">id 1</a>
<a id="id2">id 2</a>
<a id="id3">id 3</a>
</div>
</div>

If <li> contains specific text, return false

I have this HTML and I'm trying to return false on click if the element contains specific text.
This is my HTML:
<ul>
<li id="1"></li>
<li id="2"></li>
<li id="3"></li>
<li id="4"></li>
<li id="5"></li>
<li id="6">text</li>
<li id="7"></li>
</ul>
Javascript:
$("ul").on('click', 'li', function (e) {
var value = $(this).attr('id');
if ("#" + value + ":contains(\"text\")"){ // Something similar to this
return false;
};
alert('test');
});
How can I return false, if the element contains the word 'text'.
Example: http://jsfiddle.net/wSvLD/ (this returns false on everything)

You'll need to escape those quotes in contains("text")
Or use single quotes in combination with double quotes....
Also, the value var should be inside the event function.
EDITS:
$("li").click(function (e) {
var value = $(this).attr('id');
if ( $('#' + value + ':contains("text")').length != 0 ){
return false;
}
alert('test');
});
:contains returns a jQuery object, so you need to check the length of the object to see if it contains a match.
http://jsfiddle.net/8NuvP/

You were pretty close!
$("ul").on('click', 'li', function (e) {
if($(this).text() == "text"){
return false;
};
alert('test')
});

Try this:
$('li:not(:contains(text))').click(function() {
alert('test');
});

$("li").click(function(){
$(this).text() == "text" ? return false: return "something else";
});
but if what you want to do is to use a click function on all BUT the one with "text", you should do this:
$('li:not(:contains("text"))').click(function(){
//whatever you are trying to achieve
});

Get HREF property

<a class="some" id="1" href="/s/1/2">link 1</a>
<a class="some" id="2" href="/s/2/3">link 1</a>
<script>
$(document).ready(function() {
$('.some').click(function() {
var id = this.id;
var link = $(this).css('href');
alert(id);
alert(link);
return false;
});
});
</script>
When I click on the link I get correct id, but "undefined" link. What is the problem and how can I fix it?

Change
var link = $(this).css('href');
to
var link = $(this).attr('href');
.css() is used to get/set CSS properties, .attr() is used to get/set attributes on elements.

You need to access the elements attribute, not CSS property :-)
var link = $(this).attr('href');

Use attr():
var link = $(this).attr('href');
Or simply:
var link = this.href;
Your code should look like:
$(document).ready(function() {
$('.some').click(function() {
var id = this.id;
var link = this.href;
alert(id);
alert(link);
return false;
});
});