We Keep Coding

Using $(this) within .each()

I have a series of elements laid out in HTML
I am trying to get the value of the href for each div with the class wsite-com-category-product-wrap and then use this to insert a new button with the same href.
My current code is inserting all the links (for items with the class .wsite-com-category-product-wrap) into themselves meaning that each element has about 10 links in now instead of just the one.
The code I have written to do this:
$(".wsite-com-category-product-wrap").each(function() {
var link = $(this).find("a").attr("href");
$("<a href=" + link + " class='custom-category-button'>Test</a>").insertAfter(".wsite-com-product-price");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wsite-com-category-product-wrap">
Link content
<div>more divs</div>
</div>

You can use a jquery object with .insertAfter, not just a string selector.
So, change this:
$("<a href=" + link + " class='custom-category-button'>Test</a>")
.insertAfter(".wsite-com-product-price");
to:
$("<a href=" + link + " class='custom-category-button'>Test</a>")
.insertAfter($(".wsite-com-product-price", this));

I found that with the insertAfter I needed to add in something ensuring it was only being added to $(this).
I used a new variable insertHere to make it simpler:
$(".wsite-com-category-product-wrap").each(function() {
var link = $( this ).find("a").attr("href");
var insertHere = $(this).find(".wsite-com-product-price");
$( "<a href=" + link +" class='custom-category-button'>Test</a>" ).insertAfter( insertHere );
});

How to get specific span's value from div in JQuery

I have a div and i want to get text of a specific span from that div.
Following is my Div code:
'<div class="dvDynamic_' + pid + '"><p hidden="true">'+pid+'</p><span class="count_' + pid + '">' + count + '</span><span id="pname" style = "margin-left:70px;">' + pname + '</span><span id="punitprice" style = "margin-left:150px;">' + uprice + '</span></div>'
and i want to get text of the following span:
<span class="count_' + pid + '">' + count + '</span>
Please help me how to do it .

The span element which you want to target have next sibling with id. you can target that element using id selector and traverse to required span using .prev():
$('#pname').prev().text()

If you know the pid of the span you want to get, you can use
$('.count_' + pid).text()

You can identify pname element using ID selector then use .prev() to identify the desired span
$('#pname').prev().text()

Using find you can get value of span through div
function findSpanValue(pid){
return $(".dvDynamic_"+pid).find(".count_"+pid).text();
}

Get span element to target have next sibling with id. you can get that element using id selector and traverse to required span using .prev():
$('#pname').prev().html();
or
$('#pname').prev().text();

How do i make jQuery unique ID for div for click event?

I need on selection to append div element to the another div, I have done it, and also every time when I select new selection, it should append new div.
the problem is, those appended div's have same id, so I can not delete particular element. I have made them unique with declaring var and combining id with a string, like : id="add_marke'+selectedKey+'" BUT I cant do something like this jQuery( "#add_marke'+selectedKey+'" ).click(function() {
How can I select ID when I make unique ID?
var selectedKey = jQuery("#model").val();
jQuery('#example').append('' + '<div class="add_marke" id="add_marke' +
selectedKey + '" >' +
' <div class="car_tag"><span class="lbl"><span id="car_name" class="icon-remove"></span></div> ' +
'&nbsp' +
' <select name="model_cars" id="model_cars" ><option id="selectModel" name="selectModel" value="all" >Please select </option><option>test</option></select>' +
'&nbsp' + '</div>');
jQuery("#car_name").click(function() {
jQuery("#add_marke\\.selectedKey").remove();
});

You can add the IDs as you do with a predefined prefix:
... id="add_marke_' + selectedKey + '" ...
And then bind the click with a jQuery selector for all elements that have the ID starting with add_marke_:
$('div[id^="add_marke_"]').click()

What you need to do is add the click handler to the class name shared by all of these divs. Once the click handler has been triggered, you can then extract the relevant id of the element and compose a selector from that id.
jQuery( ".class_name" ).click(function() {
var id = jQuery( this ).attr( "id" );
jQuery( "#" + id ).remove();
});

You can use
jQuery( ".icon-remove" ).click(function() {
jQuery(this).parent().parent().parent().remove();
});

Since an ID must be unique you have one of two options, as I see it:
Appending some sort of counter or numeric identifier to the ID, so you always have a unique ID (e.g., count the number of elements and then attribute your ID as my-id-1, my-id-2, etc.) Here you would have to write the DOM query in such a way that searches only for those IDs which begin with a given pattern, div[id^="my-id-"]
Use a class to identify the object in terms of any interactions you would like to provide for all of these <div> elements which have the same structure. Here, you can query based on a common class, in your case .add_marke.

<div class="parentElement">
<span>jagadeesh</span>
<span class="icon-remove car-remove"></span>
<button >Remove</button>
</div>
$('.car-remove').on('click',function(){
var mainElement = $(this).closest('.parentElement')
/// do what ever you want with main element. it selects only current parent
//element
mainElement.remove();
})

Did you want to do something like this?
http://jsfiddle.net/Wg9FE/1/
var selectedKey = "someId";
jQuery('#example').append('' +
'<div class="add_marke" id="add_marke'+selectedKey+'" >' +
' <div class="car_tag"><span class="lbl"><div id="car_name" class="icon-remove"></div></div> ' + '&nbsp' +
' <select name="model_cars" id="model_cars" ><option id="selectModel" name="selectModel" value="all" >Please select </option><option>test</option></select>'+ '&nbsp' +
'</div>');
jQuery( "#car_name" ).click(function() {
jQuery( "#add_marke" + selectedKey ).remove();
});

find elements > get attribute > append to cousin

<div class="links">
<ul>
<li class="pdf"></li>
<li class="weiter">more</li>
</ul>
</div>
For each LI.weiter, I want to grab the link add sth and append it as PDF-Link:
var LinkMarkup = '<a href="';
$('.weiter A').each(function() {
LinkMarkup += $(this).attr('href') + '&type=999" target="_blank">PDF</a>';
$(this).closest('.pdf').append($(LinkMarkup));
});
Thanks a lot!

Close, the anchor is a child of the li, to you can use find. The .pdf is actually a sibling, but is also the previous element, so use .prev. You also need to build the actual a element and append:
$('.weiter').each(function() {
var href = $(this).find("a").attr('href') + "&type=999",
link = "<a href='" + href + "' target=_blank>PDF</a>";
$(this).prev('.pdf').append(link);
});

jQuery with uncomplete DOM elements

My problem is related to jQuery and the DOM elements. I need a template like the following:
var threadreply = " <li class='replyItem'>"
+ " <div class='clearfix'>"
+ " ${tittle}"
+ " </div>"
+ " </li>"
;
$.template( "threadreply", threadreply );
As you can see, this is a list element. My problem is when I parse it with $.tmpl, which retrieves a valid DOM element without the <li> </li> tags.
liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();
Is there any way I can retrieve the element without reformatting?
I know I can do it with a template with a valid ul tag and inside an each jQuery template loop, but I'm not working with JSONs, I can't convert my data structures to JSON.
The full example is as follow:
var threadreply = " <li class='replyItem'>"
+ " <div class='clearfix'>"
+ " ${tittle}"
+ " </div>"
+ " </li>"
;
$.template( "threadreply", threadreply );
var liElement = "";
for( var i = 0; i < 150; i ++ ){
liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();
}
$(liElement).appendTo("#ULElement");
EDITED
I found a workaround with this thread: JQuery Object to String wich consists on wraping each DOM element returned by the $.tmpl in a div before get the .html() of the object:
liElement = liElement + $('<div>').append( $.tmpl("threadreply", {"tittle": "hello"} )).html();
With 300 elements it takes aprox 290ms in process all elements. With the appendTo() inside the loop, it takes more than 800ms.

you do not get the 'li' element because when you do
liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();
you get the contained html (or innerhtml) of the 'li' element.
html:
<ul id="titleList">
</ul>
js:
$.tmpl("threadreply", {"tittle": "hello"}).appendTo('#titleList');

You just need the string and not a real DOM element. Just use:
liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"});
Outside the loop, you need to wrap the HTML you just generated into a new element, and then replace the former li:
$('<li />').html(liElement).replaceAll('li#existingLiID');