I have a javascript code that I need to repeat many times with just a slight change:
I need to take the function below and repeat it EXACTLY the same apart from changing info_throbber to video_throbber, then, to map_throbber, then picture_throbber and do tyhese changes only on 2 lines: line 2 and 9)
I don't want to just repeat theses dozens of line one after the other, even if it works. I would like to factorize it.
$(function() {
var $modal_types = $('select#game_info_throbber_modal_types') # FIRST INJECTION HERE
, $li = $modal_types.parent('li')
, $ol = $li.parent('ol')
, $form = $modal_types.closest('form')
, $submit = $form.find('input[type=submit]')
, $add_modal = $('Add Modal')
, $remove_modal = $('Remove Modal')
, $hidden_info_modals = $('input[id=game_info_throbber][type=hidden]') # SECOND INJECTION HERE
;
$add_modal.click(function(e) {
e.preventDefault();
.append($remove_modal.clone(true));
create_info_modal($li.clone());
});
$remove_modal.click(function(e) {
e.preventDefault();
$(this).parent('li').remove();
});
});
Using Loop through an array in JavaScript, here what I tried but it fails:
var i, s, myStringArray = [ "info_throbber", "video_throbbe", "map_throbber", "picture_throbber" ], len = myStringArray.length
for (i=0; i<len; ++i) {
if (i in myStringArray) {
s = myStringArray[i];
// ... do stuff with s ...
$(function() {
var $modal_types = $('select#deal_' + s + '_modal_types')
, $li = $modal_types.parent('li')
, $ol = $li.parent('ol')
, $form = $modal_types.closest('form')
, $submit = $form.find('input[type=submit]')
, $add_modal = $('Add Modal')
, $remove_modal = $('Remove Modal')
, $hidden_info_modals = $('input[id=deal_' + s + '][type=hidden]')
;
$add_modal.click(function(e) {
e.preventDefault();
$(this).closest('li')
.append($remove_modal.clone(true));
create_info_modal($li.clone());
});
$remove_modal.click(function(e) {
e.preventDefault();
$(this).parent('li').remove();
});
};
}
};
The problem is it seems to work but not fully as it did not append on both $add_modal nor does it allow to change values. I don't think it's necessary to understand deeply the complexe code above but the thing is it does not work while when I just put all of the 4 functions one after the other one (first for info_throbber, then video_throbber, and so on...), it works. So me creating an iteraiton through the array should be work.
thanks for yourt help,
You have a JavaScript scope issue. The function within the loop is only using the last i value provided for all iterations of that function. You need to pass the index into the function to make it work correctly.
See this stack question, JavaScript loop variable scope, for more information.
The simplest fix is to wrap your function like so
var i, myStringArray = [ "info_throbber", "video_throbber", "map_throbber", "picture_throbber" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
(function(index) {
var s = myStringArray[index];
// ... do stuff with s ...
$(function() {
var $modal_types = $('select#deal_' + s + '_modal_types')
, $li = $modal_types.parent('li')
, $ol = $li.parent('ol')
, $form = $modal_types.closest('form')
, $submit = $form.find('input[type=submit]')
, $add_modal = $('Add Modal')
, $remove_modal = $('Remove Modal')
, $hidden_info_modals = $('input[id=deal_' + s + '][type=hidden]')
;
$add_modal.click(function(e) {
e.preventDefault();
$(this).closest('li')
.append($remove_modal.clone(true));
create_info_modal($li.clone());
});
$remove_modal.click(function(e) {
e.preventDefault();
$(this).parent('li').remove();
});
$submit.click(function(e) {
var components = JSON.stringify( collect_info_modals() )
;
$ol.find('ol.info_modal').remove();
$modal_types.remove();
$hidden_info_modals.val( components );
});
var modal_types_change = function() {
var $el = $(this)
, $li = $(this).closest('li')
, id = $(this).val()
, $components = $li.find('ol.components')
;
$components.remove();
get_modal_structure(id, $li.find('select') );
};
$modal_types.attr({ id: null, name: null });
$li.remove();
var create_info_modal = function($modal, modal_type_id) {
var $select = $modal_types.clone();
if($modal.find('select').length) { $select = $modal.find('select'); }
$select.val(modal_type_id);
$select.change(modal_types_change);
$modal.prepend($select);
$modal.append($add_modal);
$ol.append($modal);
};
var collect_info_modals = function() {
var $info_modals = $ol.find('ol.components')
, components = []
;
$.each($info_modals, function(_, $info_modal) {
$info_modal = $($info_modal);
var info_modal = {}
, $components = $info_modal.find('li.component input')
, modal_id = $info_modal.parent('li').find('select').val()
;
info_modal['modal_id'] = modal_id;
$.each($components, function(_, component) {
component = $(component);
key = component.attr('name');
val = component.val();
info_modal[key] = val;
component.remove();
});
$info_modal.parent('li').remove();
components.push(info_modal);
});
return components;
};
function get_modal_structure(id, $select) {
// Grab modal structure
var url = '/admin/modal_types/modal_structure?id='+id;
$.getJSON(url, function(modal_structure) {
var $ol = $('<ol class="components">');
modal_structure.forEach(function(component){
$ol.append(build(component));
});
$ol.insertAfter($select);
});
};
function build(component, value) {
value = value || '';
var text_maxlength = 300
, $li = $('<li class="component string input stringish" />')
, $label = $('<label>'+component+'</label>')
, $input = $('<input name="'+component+'" type="text" required="required" maxlength='+text_maxlength+' value="' + value + '"/>')
;
// validations
if(component.match(/^text/)) {
$input.attr('maxlength', text_maxlength);
}
$li
.append($label) // returns the LI NOT THE LABEL
.append($input);
return $li;
};
(function() {
var hidden_info_modals = ($hidden_info_modals.val().length) ? $hidden_info_modals.val() : '[]';
hidden_info_modals = JSON.parse( hidden_info_modals );
hidden_info_modals.forEach(function(info_modal) {
var modal_type_id
, $info_modal = $li.clone(true)
, $ol = $('<ol class="components">');
;
modal_type_id = info_modal['modal_id'];
delete info_modal['modal_id'];
for (var key in info_modal) {
$ol.append(build(key, info_modal[key]));
}
$info_modal.append($ol)
$info_modal.append($remove_modal.clone(true))
create_info_modal($info_modal, modal_type_id);
});
})();
create_info_modal($li.clone(true));
});
})(i);
}
Also, you should remove if (i in myStringArray) as that is only needed when you do a foreach loop over the attributes of an object, not when you are looping over the indexes of an array.
Related
I have a constructor like that
function TodoController() {
this.todoList = [];
this.id = 0;
this.ENTER_KEY = 13;
};
TodoController.prototype = {
todoView: function (todo) {
var controller = todoController.todoList;
console.log('controller', controller);
var item = document.createElement('li');
item.setAttribute('class', 'todoItem');
var inpCheckbox = document.createElement('input');
this.setAttributes(inpCheckbox, { 'type': 'checkbox', 'class' : 'itemList'} );
var lbContent = document.createElement('label');
lbContent.innerHTML = todo.getContent();
var btnRemove = document.createElement('button');
console.log('id', this.id)
this.setAttributes(btnRemove, { 'class': 'remove', 'id' : this.id} );
// btnRemove.setAttribute('id', this.id);
//item append each element
item.appendChild(inpCheckbox);
item.appendChild(lbContent);
item.appendChild(btnRemove);
console.log('item', item);
//ul append each item
document.querySelector('#todoListView').appendChild(item);
},
now I want to create a event to delete the item, it like that
var deleteItem = document.getElementsByClassName('remove')
for(var i = 0; i < deleteItem.length; i++) {
deleteItem[i].addEventListener("click", function() {
console.log('done')
});
}
My problem is I can call the class remove, because it to be create into todoView function. In the jQuery I saw it use delegate method, but I don't know how to use it with javascript. please help me
When I run this code, in Chrome's sources tool in inspect, it says number = undefined for line 7 (groceryList.forEach(function(number) {). The arguments are being passed properly and if I do a console.log for each item it shows properly. Having the same issue with the commented out .map section that does the same thing as foreach.
Can anyone tell me what I'm doing wrong?
//BUSINESS LOGIC
var alphabatize = function(item1,item2,item3,item4){
groceryList = [item1,item2,item3,item4];
groceryList.sort();
upperGroceryList = []
groceryList.forEach(function(number) {
console.log(number);
upperGroceryList.push(number.toUpperCase());
});
/* upperGroceryList = groceryList.map(function(grocery) {
console.log(grocery);
return grocery.toUpperCase();
}); */
return groceryList;
return upperGroceryList;
};
// FRONT END
$(document).ready(function() {
$("form#items-form").submit(function(event) {
event.preventDefault();
var item1 = $("input#item1").val();
var item2 = $("input#item2").val();
var item3 = $("input#item3").val();
var item4 = $("input#item4").val();
alphabatize(item1,item2,item3,item4);
upperGroceryList.forEach(function(currentItem) {
$("#display-list ul").append("<li>" + currentItem + "</li>");
});
});
})
You can't have two return statements from a function. Instead you can return an object contained both arrays like:
var obj = {
groceryList : groceryList,
upperGroceryList : upperGroceryList
};
return obj;
Then you can use this way:
var arr = alphabatize(item1, item2, item3, item4);
arr.upperGroceryList.forEach(function(currentItem) {
$("#display-list ul").append("<li>" + currentItem + "</li>");
});
There are several things here. Yyour function variables are never defined.
var alphabatize = function(item1,item2,item3,item4){
var groceryList = [item1,item2,item3,item4], //use comma to define more than one with one var statement.
upperGroceryList = []; //end var declaration with semicolon.
groceryList.sort();
groceryList.forEach(function(number) {
console.log(number);
upperGroceryList.push(number.toUpperCase());
});
/*
You cannot have return more than once in a function.
return groceryList;
return upperGroceryList;
*/
};
also your upperGroceryList forEach function should be inside of the alphabatize function.
so the full alphabatize function should look like this.
var alphabatize = function(item1,item2,item3,item4){
var upperGroceryList = [],
groceryList = [item1,item2,item3,item4];
groceryList.sort();
groceryList.forEach(function(number) {
console.log(number);
upperGroceryList.push(number.toUpperCase());
});
upperGroceryList.forEach(function(currentItem) {
$("#display-list").append("<li>" + currentItem + "</li>");
});
};
and our submit function looks like this.
$(function(){
$("#items-form").submit(function(event) {
event.preventDefault();
var item1 = $("#item1").val();
var item2 = $("#item2").val();
var item3 = $("#item3").val();
var item4 = $("#item4").val();
alphabatize(item1,item2,item3,item4);
});
});
I have a search page where you can search books and apply several filters. On allpying filter I am sending the request in the URL to server. I have implemented that using the following javascript ->
$(document).ready(function(){
var base_url = 'https://'+window.location.hostname;
var url = base_url+'/books/search/';
var next_url = base_url+'/books/search/next/';
var filter_url = base_url+'/books/search/filter/';
var search_input = $('.search-bar input');
var bookSeach = {
searchQueryAsString : function(el){
var id = $(el).attr('id');
var id = id.substr(id.lastIndexOf('_')+1)
var filter_type = $(el).closest('ul.p-search-var-items').attr('filter-type')
var name = $(el).val();
$('#'+filter_type+'_id').val(id)
$('#'+filter_type+'_name').val(name)
return this.buildSearchQuery()
},
searchQueryAsArray : function(el){
el.find('input:checkbox:checked').each(function(){
var filter=$(this).closest('.p-search-var-items').attr('filter-type')
var id = $(this).attr('id')
var name = $(this).val()
id = id.substr(id.lastIndexOf('_')+1)
var value = $('#'+filter+'_id').val()!='' ?$('#'+filter+'_id').val()+','+id : id
$('#'+filter+'_id').val(value)
var nvalue = $('#'+filter+'_name').val()!='' ?$('#'+filter+'_name').val()+','+name : name
$('#'+filter+'_name').val(nvalue)
})
return this.buildSearchQuery()
},
buildSearchQuery : function(){
var self = this;
var query_url = base_url+'/books/search/';
$('input.filter_value').each(function(){
var el = $(this);
if(el.val()!=''){
value = $.trim(el.val())
query_url = self.updateQueryStringParameter(query_url,el.attr('id'),value)
next_url = self.updateQueryStringParameter(next_url,el.attr('id'),value)
filter_url = self.updateQueryStringParameter(filter_url,el.attr('id'),value)
}
})
return {'url':query_url,'next_url':next_url,'filter_url':filter_url};
},
updateQueryStringParameter : function(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
},
filterText : function (elem) {
var value = elem.val().toLowerCase();
var filter = elem.attr('data-filter')
$(".p-search-var-items[filter-type='"+filter+"'] > li").each(function() {
if ($(this).text().toLowerCase().search(value) > -1) {
$(this).show();
}
else {
$(this).hide();
}
});
},
loadBooksOnScroll : function(count){
var ajax_url = bookSeach.buildSearchQuery()
if($('#dropdownMenu1').attr('data-filter-applied')!=''){
ajax_url = ajax_url['filter_url']
data = {'index':count,'type':$('#dropdownMenu1').attr('data-filter-applied')}
}else{
ajax_url = ajax_url['next_url']
data = {'index':count}
}
this.ajaxHandler(ajax_url,'GET',data,this.renderBookList)
},
loadBooksOnSort : function(type){
var ajax_url = bookSeach.buildSearchQuery()
ajax_url = ajax_url['filter_url']
this.ajaxHandler(ajax_url,'GET',{'index':0,'type':type},function(response){
$('.p-result').html('')
bookSeach.renderBookList(response)
})
},
ajaxHandler : function(url,method,data,callback){
$.ajax({
'url':url,
'type':method,
'data':data,
'success':function(response){
if(response){
callback(response)
}
}
})
},
filterContentByKeyWord: function(key,type){
var keyword = {}
keyword[type+'_key']=key
var ajax_url = base_url+'/'+type+'s/search/';
this.ajaxHandler(ajax_url,'GET',keyword,function(result){
bookSeach.renderFilterContent(result,type)
})
},
renderFilterContent: function(results,type){
$('.'+type+'-results').html('')
var template =_.template($('#'+type+'_template').html())
var id = this.getUrlParameter(type+'_id')
console.log(id, results,id)
$('.'+type+'-results').append(template({'results':results,'id':id}))
},
renderBookList : function(books){
var template =_.template($('#book_detail').html())
$('.p-result').append(template({'books':books}))
},
removeParameter : function(url, parameter){
var urlparts= url.split('?');
if (urlparts.length>=2)
{
var urlBase=urlparts.shift(); //get first part, and remove from array
var queryString=urlparts.join("?"); //join it back up
var prefix = encodeURIComponent(parameter)+'=';
var pars = queryString.split(/[&;]/g);
for (var i= pars.length; i-->0;)
if (pars[i].lastIndexOf(prefix, 0)!==-1) //idiom for string.startsWith
pars.splice(i, 1);
url = urlBase+'?'+pars.join('&');
}
return url;
},
getUrlParameter : function(sParam){
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
};
// Search within filters by keyword - START
//Delay function to prevent calling the function on every key press
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
//On keyup for search within filters
$('.p-search-cat-box').on('keyup',function(){
var self = this
delay(function(){
var filter = $(self).attr('data-filter');
if(filter=='author' || filter=='publisher' || filter=='seller' || filter=='institute'){
$('#'+filter+'_key').val($(self).val())
bookSeach.filterContentByKeyWord($(self).val(),filter)
}else{
bookSeach.filterText($(self))
}
}, 600 )
});
// Search within filters by keyword - END
//Filters on change event - START
// For category and sub category
$('.p-search-var-items input:radio').on('change',function(){
var redirect_url = bookSeach.searchQueryAsString($(this))
window.location.href = redirect_url['url'];
})
// For Authors, Publishers and Binding
$(document).on('change','.p-search-var-items input:checkbox',function(){
elem = $(this)
el = elem.closest('.p-search-var-items')
$('#'+el.attr('filter-type')+'_id').val('')
$('#'+el.attr('filter-type')+'_name').val('')
var redirect_url = bookSeach.searchQueryAsArray(elem.closest('.p-search-cat-list'))
window.location.href = redirect_url['url'];
})
//Filters on change event - END
// Filters - collapse up and down - START
$('.filter-container .p-sub-cat i').on('click',function(){
if($(this).hasClass('fa-minus')){
$(this).closest('.filter-container').find('.p-search-cat').hide("slide",{direction:'up'},500)
$(this).removeClass('fa-minus')
$(this).addClass('fa-plus')
}else{
$(this).closest('.filter-container').find('.p-search-cat').show("slide",{direction:'up'},500)
$(this).removeClass('fa-plus')
$(this).addClass('fa-minus')
}
})
// Filters - collapse up and down - END
//Search box Header - START
$('#search_books').on('click',function(){
var redirect_url = bookSeach.buildSearchQuery()
window.location.href = redirect_url['url'];
})
$("#query").keyup(function(event){
if(event.keyCode == 13){
$("#search_books").trigger('click');
}
});
//Search box Header - END
//Applied FIlters - remove option
$('.p-filter-title img').on('click',function(){
var param = $(this).attr('data-applied-filter')
if(param=='author' || param=='publisher' || param=='seller' || param=='institute' || param=='binding' ){
var id = $(this).attr('data-filter-id')
$('#'+param+'_'+id).removeAttr('checked')
$('#'+param+'_'+id).trigger('change')
}else{
var paramname = param.substr(0,param.lastIndexOf('_')+1)
url = bookSeach.removeParameter(window.location.href,paramname+'name')
redirect_url = bookSeach.removeParameter(url,param)
window.location.href = redirect_url
}
})
//Infinite Scroll - Book Results - START
if(location.href.indexOf('books/search/')>0){
var count =10;
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
bookSeach.loadBooksOnScroll(count);
count+=10;
}
});
}
//Infinite Scroll - Book Results - END
//Filters in Responsive Layout - START
$('.apply').on('click',function(){
$('.mobile-filters ul.p-search-var-items span.m_apply_filter').each(function(){
if($(this).attr('data-is-selected')=='true'){
var id = $(this).attr('data-id')
var type = $(this).attr('data-type')
var value = $('#m_'+type+'_id').val()!=''? $('#m_'+type+'_id').val()+','+id : id
$('#m_'+type+'_id').val(value)
}
})
$('.m_filter').each(function(){
var param = $(this).attr('id');
param = param.substr(param.indexOf('m_')+2)
value = $.trim($(this).val())
redirect_url = bookSeach.updateQueryStringParameter(url,param,value)
})
window.location.href = redirect_url
})
$('.m_apply_filter').on('click',function(){
if($(this).attr('data-is-selected')=='false'){
$(this).closest('li').addClass('p-search-var-items-active')
$(this).attr('data-is-selected','true')
}else{
$(this).closest('li').removeClass('p-search-var-items-active')
$(this).attr('data-is-selected','false')
}
})
//Filters in Responsive Layout - END
$('.back-to-top').on('click', function(){
$(window).scrollTop(0 )
})
$(window).on('scroll', function(){
if($(window).scrollTop()>1200){
$('.back-to-top').removeClass('hide')
}else{
$('.back-to-top').addClass('hide')
}
})
$('.presentation a').on('click', function(e){
e.preventDefault();
var type= $(this).data('type')
bookSeach.loadBooksOnSort(type)
$('#dropdownMenu1 .sort_filter').text('Sort by :'+type)
$('#dropdownMenu1').attr('data-filter-applied',type)
})
}
})
})
What it does is when you select a filters it changes the url makes a server call and displays the data accordingly.
It also implements infinite scroll on scrolling down it loads 10 more results.
I want to implement the entire thing using Angular2 with typescript. Can someone please suggest me how to implement my js code using typescritp and Angular2. I am new to angular so I am having some problem in implementing the same.
Thank you.
This is more of an advise than answer. You should avoid using jQuery in Angular. The reason being jQuery modifies the DOM directly and Angular modifies the DOM via an abstraction. You'll run into a lot of trouble doing so.
I couldn't be stuff reading through all that, it's a big mess and doesn't look like you're doing it the proper way anyways and your methods are big and fat and noisy.
If your aim is after scrolling to a certain length then query and display more data then you can try something like:
#HostListener('window:scroll', []) onWindowScroll($event: any) {
// your logic...
}
Then in your template use *ngIfetc...
I'm too very new to angular 2 but this tutorial helped me a lot:
https://www.pluralsight.com/courses/angular-2-getting-started
further to implement infinite scroll use:
https://www.npmjs.com/package/angular2-infinite-scroll.
hope this helps :)
I tried the following:
HTML:
<div contenteditable="true" id="editable"></div>
JS:
$('#editable').keyup(function() {
addID();
});
function addID()
{
$('#editable *').each(function() {
var t = GenerateID();
$(this).attr('id','id-' + t);
});
}
function GenerateID()
{
var str = 'abcdefghijklmnopqrstuvwxyz0123456789';
var alphabet = '',
genID = '';
while(genID.length < 5)
{
alphabet = str.charAt(Math.floor(Math.random() * str.length));
genID += alphabet;
}
return genID;
}
But on every keyup it keeps on changing the ID.
How can I just set the id once for all the elements while typing, and still keep it unique throughout the div ?
JSFiddle
LAST UPDATE:
Now I checked the code in your fiddle and I'm sure it works. The checking for uniqueness can probably be made into a function, but i'll leave that to you:
$('#editable').on( 'keyup', addID );
var count = 0; // this will absolutely ensure that ID will be unique
function addID(){
var previousIDs = [];
$('#editable *').each(function() {
count++;
var thisID = $(this).attr( 'id' );
// let's check if we have duplicates:
var index = 0, len = previousIDs.length, isDuplicate = false;
for( index = 0; index < len; index++ ){
if ( thisID === previousIDs[index] ) {
isDuplicate = true;
break;
}
}
// now change the ID if needed:
if ( isDuplicate || ! thisID ){
var t = GenerateID();
var newID = 'id-' + t + '-' + count;
$(this).attr('id', newID);
previousIDs.push( newID );
}else{
previousIDs.push( thisID );
}
});
}
Working Fiddle
Try this:
$('#editable').keyup(addID);
function addID() {
$('#editable *').each(function () {
var t = GenerateID();
var elem = $(this);
var attr = elem.attr('id');
if (!attr) {
elem.attr('id', 'id-' + t);
}
});
}
/**
* #return {string}
*/
function GenerateID() {
var str = 'abcdefghijklmnopqrstuvwxyz0123456789';
var alphabet = '',
genID = '';
while (genID.length < 5) {
alphabet = str.charAt(Math.floor(Math.random() * str.length));
genID += alphabet;
}
return genID;
}
Also consider that your random string generator may generate same string again.
Replace your code with following :
$('#editable *').each(function() {
if(!$(this).hasClass("idgenerated")){
console.log( $(this).attr('id') );
var t = GenerateID();
$(this).attr('id','id-' + t);
$(this).addClass("idgenerated");
console.log($(this).prop("tagName") + ' = ' + t);
}
});
Working fiddle
I have the following
var ahrefLength = $('a').length;
for (var i = 0; i < ahrefLength; i++) {
var ahrefUrl = $('a')[i].attr('href');
if(ahrefUrl != '') {
$('a')[i].text('Unique');
}
}
How can I fix this so that no duplicates of "href" appear ? At the moment, if 2 href are the same it fixes both ? i.e. I need to ensure that no duplicates
var list = {};
$('a[href]').text(function(i,text) {
var href = $(this).attr('href');
if( !(href in list) )
return list[href] = 'Unique';
else
; // what do you want to do with the duplicate?
});
To use a for statement:
var list = {};
var a_els = $('a[href]'); // Cache the DOM selection
var len = a_els.length;
for(var i = 0; i < len; i++) {
var a_i = a_els.eq(i);
var href = a_i.attr('href');
if( !(href in list) )
a_i.text(list[href] = 'Unique');
else
; // what do you want to do with the duplicate?
}
You can use an associative array (viz., an object) as a sort of "set" to keep track of what URLs you've already seen:
var ahrefLength = $('a').length;
var hrefsToSkip = { '': true };
for (var i = 0; i < ahrefLength; i++) {
var ahrefUrl = $('a')[i].attr('href');
if(! hrefsToSkip[ahrefUrl]) {
$('a')[i].text('Unique');
hrefsToSkip[ahrefUrl] = true;
}
}
var hrefIdx = {};
var href = null;
$('a').each(function(i, e) {
href = $(this).attr('href');
if ( href != '' && !hrefIdx[href]) {
$(this).text('Unique');
hrefIdx[href] = true;
}
});
Use jQuery slice:)
Demo: http://jsfiddle.net/mhNra/
Remove all duplicates starting from the end
$( "a" ).each( function() {
$( "a[href=" + $( this ).attr( "href" ) + "]" ).slice( 0, -1 ).remove()
});
Remove all duplicates starting from the first anchor
$( "a" ).each( function() {
var arr = $( "a[href=" + $( this ).attr( "href" ) + "]" );
arr.slice( 1, arr.length ).remove()
});