We Keep Coding

Wrap a tag around href inside a div

In the HTML code there is a 'href' , is there any posiblity to wrap an A-tag() around it? I'm new to this so please don't be too harsh :)
Note that the jquery is there to find the 'href' of a child inside the div and setting that attritbute to .summary-item-wrapper
HTML:
<div class="summary-item-wrapper" href="www.google.no" id="yui_3_17_2_4_1483527702805_1738"><div>
Jquery:
$(document).ready(function(){
$('body').wrapInner('<div id="support"></div>');
$('#support .sqs-block-summary-v2 .summary-item').each(function () {
var linkto = $(this).find('.summary-title a').attr('href');
$(this).children('.summary-item-wrapper').attr('href', linkto);
});
});

If there are multiple divs on your page you wish to convert, and to remove divs, but to keep all attributes, you can do something like this:
$( "div.summary-item-wrapper" ).each(function() {
$(this).before('<a href=http://'+$(this).attr('href') +'>A link');
$(this).prev().attr('id',$(this).attr('id'));
$(this).prev().addClass($(this).attr('class'));
});
$('div.summary-item-wrapper').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summary-item-wrapper" href="www.google.no" id="yui_3_17_2_4_1483527702805_1738">44444444444</div>
<div class="summary-item-wrapper" href="www.google.com" id="yui_3_17_2_4_1483527702805_33333">ttttttttttt</div>

What you want can be done with this:
$('#support .sqs-block-summary-v2 .summary-item-wrapper').wrap(function () {
return '';
});
Also href="google.no" means go to <currentdomain>/google.no, in case you need the google.no use href="https://google.no"
Check JSFiddle.
Please consider the comments on your question too.

How can I properly use '$(this)' to call a DOM element that triggered the event?

I wrote the following script that resets the the Iframe Source, removes a class (.play) and adds an image placeholder when .b-close is clicked. I got it to work but the problem is that I have multiple modals and I would like only like to affect the modal that's clicked. I figured that I should use the '$(this)' DOM element in order to achieve this.
<script>
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
$('.pretty-embed').removeClass('play').empty();
$('.pretty-embed').html(vidImgUrl);
$('.b-modal').click(); /// Just trying to close modal..... $.modal.close();
});
});
})(jQuery);
</script>
Here's is the the Modal that I will be calling. Keep in mind that there will be multiple modals, so I would only like to affect the modal that's clicked
<div id="element_to_pop_up" display: block;">
<a class="b-close">x</a>
<h3 class="pop-hd">Header</h3>
<p>Test Video</p>
<div class="pretty-embed play" data-pe-allow-fullscreen="false">
<iframe width="330" height="186" style="border:none;" src="//www.youtube.com/embed/nGSfaMxCu-U?autoplay=1&rel=1"></iframe>
</div>
</div>

The problem is in your $('.pretty-embed') selector which selects all the embed elements in all modals If I understood your problem correctly. To fix that take the id of the modal and prepend it to the selectors like below:
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
var parent_id = $(this).parent().attr(id);
// Prepend the parent id before the .pretty-embed selector
$('#'+parent_id+' .pretty-embed').removeClass('play').empty();
$('#'+parent_id+' .pretty-embed').html(vidImgUrl);
$('#'+parent_id+' .b-modal').click(); /// Just trying to close modal... $.modal.close();
});
});
Also you can use the same way you did it in the previous lines:
$(this).parent().find('.pretty-embed').removeClass('play').empty();

You can get the current modal with
var current_modal = $(this).parent().find('.pretty-embed');
Then remove the class play, and add your image like this:
current_modal.removeClass('play').empty();
current_modal.html(vidImgUrl);
See your complete code in this jsfiddle

how do I display the content of <p> in jquery

<div class="albumclass">
<img width="100" height="100" data-assigned-id="9" src="/Content/images/fold.png">
<p>15Sep2015</p>
</div>
The above code is generated dynamically through jQuery. After that I need to display the content of <p> ie., '15Sep2015' by clicking on the above image. How can I get this? I used the below code:
$('.album_inner').on('dblclick', '.albumclass img', function (e) {
var txt = $(this).closest("p").text();
alert(txt);
}
But that alerts nothing.It not possible to take content implicitly because a lot of similar div will be there.

The .closest() gets the parent. So use .siblings() or .next. I have used .next():
$('.album_inner').on('dblclick', '.albumclass img', function (e) {
var txt = $(this).next("p").text();
alert(txt);
}

You can go up to parent div and find p using find() :
$('.album_inner').on('dblclick', '.albumclass img', function (e) {
var txt = $(this).closest("div").find('p').text();
alert(txt);
}
Hope this helps.

$('.albumclass').on('click', function(){
var p_text = $(this).children('p').text();
alert(p_text);
});

Why not try adding a class to the 'p' tag so that u can get the element by a class selector and see
var text = $('.class').text();alert(text);
or u may try
$(document.body).on('click','.class',function(){
});

jQuery select the function selector

I'm trying to achieve something inside a function, to actually access the parent selector.
Here is a small snippet of my HTML code:
<div class="module-row module-tab pull-right" id="modtab-sql_net">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-1">
</div>
<div class="module-row module-tab pull-right" id="modtab-sql_dss">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-2">
</div>
Here is the jQuery script I tried:
$('div[id^="modtab-"]').click(function(){
$(this).next('div[id^="tab-module-row"]').toggle(function(){
$(this).next('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
// The above line is incorrect. I need to change img attr for the class which is inside the div being clicked
});
});
Now, I want to actually change the image icon from a "plus" to a "minus" (the filenames are kept such).
I need to change $(this).next('.modtab-toggle') in the code to something that can work.
Please do NOT suggest to simply access the class using $('.modtab-toggle') as I have multiple such div tags in the code. It won't work out that way.
Thanks for any help.

Try this:
$('div[id^="modtab-"]').click(function(){
$(this).find('.modtab-toggle').attr("src", function(i, attr){
var o = this.src.indexOf('plus') > -1 ? this.src.replace('plus', 'minus') : this.src.replace('minus', 'plus');
return o;
});
});
See the Demo # Fiddle

try something like this
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('.tab-module-row').toggle(function(){
$this.find('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
});
});
Note: you should use class instead of id because it should be unique
#tab-module-row ->.tab-module-row
EDITED ANSWER
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('div[id^="tab-module-row"]').toggle(function(){
var img = $this.find('.modtab-toggle'); // your image object
// your condition to check which image to display will goes here.
});
});

change $(this).next('.modtab-toggle') to $(this).find('.modtab-toggle') to make it work.
See find() docs here

How can I reduce the redundancies in my jQuery code?

The size of my JavaScript file is getting out of hand because I have hundreds of links, and each one has its own jQuery function even though they all peform basically the same task.
Here's a short excerpt:
$("#link1").click(function ()
{
$(".myDiv").hide();
$("#myDiv1").toggle();
});
$("#link2").click(function ()
{
$(".myDiv").hide();
$("#myDiv2").toggle();
});
$("#link3").click(function ()
{
$(".myDiv").hide();
$("#myDiv3").toggle();
});
Would there be a way to abstract some of this logic so that I have only a single function instead of hundreds that do the same thing?

You can add a class to all the links that do the same thing and act with jQuery on that class.
<a href='whatever' id='link_1' class='toggler'>text</a>
<a href='whatever' id='link_2' class='toggler'>text</a>
jQuery code will be:
$(".toggler").click( function(){
// toggle the divs
var number = $(this).attr("id").split('_')[1];
$(".myDiv").hide();
$("#myDiv"+ number).toggle();
});

The general approach that I use is to use the traversal methods to find related elements rather than using absolute selectors. This will allow you to apply the same code to elements that are similarly configured without any complicated dependencies on the format of the ids, etc. Done correctly it's also reasonably robust against minor changes to the mark up.
For example, say I have a series of links, each followed by a div that will be toggled by clicking on that link. The links each have a particular class so they can easily be referenced.
Toggle
<div>
Some content...
</div>
Toggle
<div>
Other content
</div>
I would then find all the links by class, then use the next method to find the associated div and toggle it's visibility. Note that this is a simple example. You may need to use more complicated traversal mechanisms and filter by element type or class, too, depending on your exact mark up.
$('.linkClass').click( function() {
$(this).next().toggle();
});

What about adding the ID of your target into the href of the link?
<a id="link1" href="#myDiv1" class="toggle">Toggle 1</a><br/>
<a id="link2" href="#myDiv2" class="toggle">Toggle 2</a><br/>
<a id="link3" href="#myDiv3" class="toggle">Toggle 3</a><br/>
Then you could write a single function like so:
$(".toggle").click(function(e) {
e.preventDefault();
$(".myDiv").hide();
$($(this).attr('href')).toggle();
});
Or another approach I've used:
$(".toggle").each(function(i) {
$(this).click(function(e) {
e.preventDefault();
$(".myDiv").hide();
$(".myDiv:eq("+i+")").toggle();
});
});
This one is in the same vein as tvanfosson's idea, using some sort of DOM relationship to link the elements, in this case by assuming that the link elements and the div elements are in the same order on the page.

You can just have each click call an external function and pass in a parameter for the number string.
Ex:
$("#link1").click(toggle("1"));
$("#link2").click(toggle("2"));
function toggle(number) {
$(".myDiv").hide();
$("#myDiv"+number).toggle();
}

function makeToggler(number) {
$('#link' + number).click(function() {
$('.myDiv').hide();
$('#myDiv' + number).toggle();
});
}
makeToggler(1);
makeToggler(2);
makeToggler(3);
You can adapt this to meet your naming standards.
Depending on the structure of your divs and links, there are better ways to do it. If you post the structure of your elements, I'll show you one.

I think this is a simple refactoring
you could define a function as such
function doSomethingTo(thisDiv)
{
$(".myDiv").hide();
$(thisDiv).toggle();
}
and then just reuse it where you need it
$("#link1).click(doSomethingTo(thisDiv));
$("#link2).click(doSomethingTo(thisDiv));

Building on Craig's solution:
$("#link1, #link2").click(toggle(this));
function toggle(obj) {
$(".myDiv").hide();
$("#myDiv" + $(obj).attr("id").replace('link','')).toggle();
}

I change the link become like this (i rename the id to just a number)
<a href='#test1' id='1' class='link'> ... </a>
<a href='#test2' id='2' class='link'> ... </a>
<a href='#test3' id='3' class='link'> ... </a>
and then on js:
$(document).ready(function(){
$('.link').click(function(){
$('.myDiv').hide();
var id = $(this).attr('id'); // take the id
$('#myDiv'+id).toggle();
});
});

throw your makeToggle into a loop?
function makeToggler(number) {
$('#link' + number).click(function() {
$('.myDiv').hide();
$('#myDiv' + number).toggle();
});
}
for(i=1;i>=#;i++) {makeToggler(i);}
then you could even have it count your links for you, something link this?:
function countElementsByClass(className){
var count = 0;
var o = document.getElementsByTagName("a").className;
for(var i=0;i<o.length;i+){
if(o[i].className == "accordion/whatever")
count ++;
}
return count;
}
credit: building on SLaCKS solution