Develop Reference

How to convert links to text using JQuery?

I try to think up function which can replace links to text. Image inside a tag should be moved to the wrapper, the original a should be removed.
JS:
var selectors = 'a.mark-video;a.sp5;a>img[alt!=""]'
selectors = selectors.split(";").join(", ");
$(selectors).each(function() {
var current = this;
if (this.nodeName == "IMG") {
current = this.parentNode;
if (current.nodeName != "A")
current = this.parentNode;
if (current.nodeName != "A")
return false;
current = $(current);
}
var wrapper = current.parent();
var new_context = $().append(current.html());
current.remove();
wrapper.append(new_context);
}
);
The problem is
1) that the image is not inserted into the wrapper
2) if it would be inserted it would not have correct position.
I am experimenting using webextensions API (Firefox addon) and I injected the code to site:
http://zpravy.idnes.cz/zahranicni.aspx
In the debugger you can see two wrappers with class="art ". I have removed the first link but image is not inserted. The second one has not been removed yet when debugger was paused after first iteraction.
I hope you can find out why the image is not appended and how to append it to the original position of the element a. I need to find out position of the element a first, and then to move the image into to correct position - that is before div.art-info.
Note: please do not change the selectors string. This is the users input from form field.
Edit:
Almost there:
function(){
if (this.parentNode.nodeName == "A")
$(this.parentNode).replaceWith($(this));
else
$(this).html().replaceWith($(this)); // error: html() result does not have replaceWith...
}

Is this what you're looking for?
https://jsfiddle.net/4tmz92to/
var images = $('a > img');
$.each(images, function(key, image) {
$(this).parent().replaceWith(image);
});
First select all the images that you want to remove the link from, then loop through them and simply replace the parent() with the image.

I have finally solved the problem:
$(selectors).each(
function(){
if (this.parentNode.nodeName == "A")
$(this.parentNode).replaceWith($(this));
else
$(this).replaceWith(
$(this).html()
);
}
);
This works similar. Novocaine suggested not to use $(this).html() but this would skip some images so I prefer to use it.

I need help switching background images with jQuery

I have an unordered list of img url's that are generated with from a custom post type in wordpress.
I have a slider and am using the number of slides to determine which Image url I want as the background for my element.
Sample of generated list:
<ul class="tes-image-links">
<li>http://img-url1</li>
<li>http://img-url2</li>
<li>http://img-url3</li>
</ul>
Sample of my jQuery
$('.cycle-slideshow').find('.cycle-slide').each(function(i){
if ( $(this).hasClass('cycle-slide-active') ){
var apimglink = $('.tes-image-links').children('li').eq(i).text();
$('.ap-testimonial.img-back').css("background" , "'url('"+apimglink+"') !important'" );
}
});
When I use console.log() it spits out the right text that is in the <li> tag, but I can't seem to get this to work.

Remove single quotes and !imprtant from background properties. Also dont forget to wrap your function in a DOM ready function
$(document).ready(function(){
$('.cycle-slideshow').find('.cycle-slide').each(function(i){
if ( $(this).hasClass('cycle-slide-active') ){
var apimglink = $('.tes-image-links').children('li').eq(i).text();
$('.ap-testimonial .img-back').css("background" , "url('"+apimglink+"')" );
}
});
})

The previous code is giving me issues and I could not get it to show the image with .each().
Using a for-loop I was able to get the Section to use the URL as a background based on the slide number:
var cycleSlide = $('.cycle-slideshow').find('.cycle-slide');
for (i = 0; i < cycleSlide.length; i++) {
if (cycleSlide.eq(i).hasClass('cycle-slide-active')){
var apimglink = $('.tes-image-links').children('li').eq(i).text();
apimglink = apimglink.replace("http://localhost", "");
$('.ap-testimonial').css('background-image', 'url(' + apimglink + ')');
console.log(apimglink);
} //End If
}; //End For
Thank you all for your help.

Mapping href value with page urls

I have few anchor tags inside a div and I need to retrieve the href values of all anchor tags.
For example
<div id="sample">
<ul>
<li>Location1</li>
<li>Location2</li>
<li>Location3</li>
<li>Location4</li>
</ul>
</div>
Assuming I am in /location1, the li that has a href="/location1" should have a separate background color, say for example red. If I am in /location2 the corresponding li should have the same red color.
I am trying to retrieve the page url first and then store it in a variable.
var pageurl = (window.location.pathname);
But not too sure on how to retrieve the href and then map it based on the page urls.

You do something like this:
// Get the active link first
var $links = $('#sample a').filter(function() {
return this.href && this.href == location.pathname;
});
// Highlight the current li having the link
$links.closest('li').addClass('active');
In the active class set whatever style you want to apply.

This is jQuery code, need to add jQuery library to work. It will work on page load
jQuery(document).ready(function(){
var url=document.URL.split('?')[1];
if(url == undefined){
url = '';
}
if(url != ''){
url = '#'+url;
jQuery(url).trigger('click');
}
var url=document.URL.split('?')[1];
if(url == undefined){
url = '';
}
if(url != ''){
// do here what you want to do
}
}
);

$(document).ready(function(){
$('#sample ul li a').each(function(e){
var href = $(this).attr('href');
// do something with href
});
});

How to Read a webpage and extract certain links using jQuery?

Its on the same domain.. both my Jquery code and the url to read.
What i want to do is first read the webpage using Jquery and then parse certain links which has "ProductDetails.php" and extract "ProductCode" from the webpage into array.
The html page may have many instances of a href="ProductDetails.php which looks like below.
<a href="ProductDetails.php?ProductCode=SMS%2D15%2DXLG%2DA7&CartID=1" class="carttext colors_productname cart-item-name">item 1 <a>
<a href="ProductDetails.php?ProductCode=SMS%dfdfde&CartID=2" class="carttext colors_productname cart-item-name">test me item <a>
I dont know if this is really possible

You would have to do something like this:
var filteredAnchors = $( document.body ).find( 'a' ).map(function( _, anchor ) {
if( anchor.getAttribute('href').indexOf( 'ProductDetails.php' ) === 0 ) {
return anchor.getAttribute('href').match( /ProductCode=(.*?)&/ )[ 1 ];
}
}).get();
filteredAnchors now should contain all product codes.
Example: http://jsfiddle.net/WgwSr/

Something like this should get you started:
$.ajax({
url: "pagetoload.html",
success: function(htmlofthepage) {
var html = $(htmlofthepage),
resultarray = []; // the array containing our final result set
// getting all of the anchor tags we want to look at
$('a[href^="ProductDetails.php"]', html).each(function () {
var t = $(this), // the anchor tag
href = t.prop('href'), // the href of the tag (eg. ProductDetails.php?...)
start = href.indexOf('ProductCode', 0),
begin = 0,
end = 0;
if (start > -1) {
begin = href.indexOf('=', start) + 1;
end = href.indexOf('&', begin);
resultarray.push(href.split(begin, end));
}
});
}
});

Use jQuerys eachfunction:
jQuery(function($){
var links = [];
$("a[href^=ProductDetails.php]").each(function(){
links.push(this.href.replace(/^.*\?/,'');
});
});

Having jQuery string comparison issues

I've got a fiddle going here to show what I'm trying to do.
I have a table that is generated dynamically, so the columns could appear in whatever order the user chooses. So, I'm trying to get the index of two specific headers so that I can add a CSS class to those two columns for use later.

You should use .filter() here instead (and whenever you need to restrict the element set), since your .each() return is getting thrown away, like this:
//Loop thru the headers and get the Supp elem
var suppCol = $("#my_table th").filter(function() {
return $(this).html() == "Supp";
});
//Loop thru the headers and get the Report elem
var reportCol = $("#my_table th").filter(function() {
return $(this).html() == "Report";
});
You can test the updated/working fiddle here. The alternative using .each() would look like tis:
var suppCol, reportCol;
$("#my_table th").each(function() {
var $this = $(this), html = $this.html();
if(html == "Supp") suppCol = $this;
if(html == "Report") reportCol= $this;
});
You can test that version here.