wrapInner() with href of children elements - javascript

I have next structure - there are 7 blocks:
<div class="blog-item">
<h2>...</h2>
<p>...</p>
<div class="jcomments-links">
<a class="readmore-link" href="..."></a>
</div>
</div>
I want to receive href of the inner link, delete its parent block with link and add a link inside block with class="blog-item" with the same href as deleted link...
I had wrote this:
<script>
jQuery(document).ready(function() {
jQuery(".blog-item a.readmore-link").each(function() {
var ahref = jQuery(this).attr("href");
jQuery(this).parent('.jcomments-links').remove();
jQuery(this).parent().closest('.blog-item').wrapInner(function () {
return "<a href='" + ahref + "'></a>"
});
});
});
</script>
But something wrong. There will not appear new link. Any help will be greatly appreciated. Thanks

Try this (run the snippet to see it work, and you'll have to use the inspector to see that the html is correct):
jQuery(document).ready(function ($) {
$(".blog-item a.readmore-link").each(function () {
var ahref = $(this).attr("href"),
$wrapItem = $(this).closest('.blog-item');
$(this).closest('.jcomments-links').remove();
$wrapItem.wrapInner('<a href="' + ahref + '"/>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blog-item">
<h2>Heading</h2>
<p>Paragraph</p>
<div class="jcomments-links">
remove
<a class="readmore-link" href="http://www.example.com">example</a>
</div>
</div>

its because you are deleting $(this) when you remove the .parent('.jcomments-links') from the DOM, so the reference to add the <a> to the .blog-item has not reference when you say $(this).closest() cause there is no more $(this).
try this:
$(document).ready(function() {
$(".blog-item a.readmore-link").each(function () {
var ahref = $(this).attr("href");
$(this).closest('.blog-item').append("<a href='" + ahref + "'>This is my new link</a");
$(this).parent('.jcomments-links').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blog-item">
<h2>...</h2>
<p>...</p>
<div class="jcomments-links">
<a class="readmore-link" href="this-is-my-href-i-want">This is the Link woo woo</a>
</div>
</div>

Related

Accessing this element in scope (and data attribute) where attributes match

I have the following snippet:
$(".tab").on("click", function() {
var tabID = $(this).attr("data-item");
$('.image[data-item = ' + tabID + ']').addClass('active');
});
<div class="tabbedContent">
<div class="imageWrapper">
<div class="image" data-item="item--1">
<!-- image -->
</div>
<div class="image" data-item="item--2">
<!-- image -->
</div>
</div>
<div class="tabs__rapper">
<div class="tab" data-item="item--1" >
<!-- tab text here -->
</div>
<div class="tab" data-item="item--2" >
<!-- tab text here -->
</div>
</div>
</div>
Basically, when a user clicks a tab, it displays an image assigned to that section (they're linked through data-item).
However, with the following:
$('.image[data-item = ' + tabID + ']').addClass('active');
If I have two of these tabbed modules on one page (if I have two on the same page, the data-items will be the same as they both start from 1), then images in both sections change.
What I'm trying to do is change the tab that's in scope by using this.
However, I'm unsure on how to do this, I've tried (need something like this):
$(this + '[data-item = '+tabID+']').addClass('active');
Am I far off?
try to stop the event propagation when declaring it :
$(".tab").on("click", function( event ) {
event.stopPropagation();
var tabID = $(this).attr("data-item");
$('.image[data-item = ' + tabID + ']').addClass('active');
});
Since.tab is scoped inside .tabbedContent:
$(this).parent('.tabs__rapper').parent('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');
Assuming, .image is inside .tab, you can change the tab that's in scope by using:
$(".tab").on("click", function() {
var tabID = $(this).attr("data-item");
$(this).closest('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');
});

How to prevent default action of all anchor tag from opening href URL

I want to learn how to use:
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
or any other way to prevent default action of all anchor tag from opening href URL in it using any ways in core javascript or minified javascript and open the URL in EventListener.
var imgurl = "http:"+lcurl+touch_id+".jpg";
var data = "<div id=charm_"+touch_id+" data-charmid="+touch_id+" data-vis="+bgid+" data-vid="+seid+" data-vtitle="+vtitle_url+" data-title="+title_url+" style='float:left;' class='mdl-cell mdl-cell--4-col charm-wrapper'>\n\
<div class='mdl-card-wrapper charm-inner'>\n\
<div class='demo-card-wide mdl-card mdl-shadow--8dp'>\n\
<div class='mdl-card__media'>\n\
"+locicon+"\n\
<a id="myAnchor" href = '"+popupurl+"'>\n\
<div style='position:relative;'>\n\
<div style='position:absolute;z-index:9;right:0px;bottom:0px;'><img width=32px src="+cf_assets+"img/hanger.png></div>\n\
<div id=imagearea_"+touch_id+" title='"+title+"' class='imagearea loading'>\n\
</div></div></a>\n\
</div>\n\
<div class='mdl-card__title'>\n\
<div class='right-charm'>\n\
<div class='social-share'>\n\
"+copycontent+"\n\
"+watsapp+"\n\
<a onclick=sharetofb('"+ct_domain+socialshare_url+"'); title='Facebook' id=fb"+touch_id+" \n\
class='fb_share'></a>\n\
<a onclick=sharetotwitter('"+ct_domain+socialshare_url+"'); title='Twitter' id=tw"+touch_id+" class='tw_share'> </a>\n\
</div>\n\
</div>\n\
<div class='icharm'>\n\
<h2 class='mdl-card__title-text'>"+subtitle+"</h2>\n\
<div class='mdl-card__subtitle-text'>"+title+"</div>\n\
<div id=vid_"+touch_id+" class='mdl-card__subtitle-videoname'>"+videoname+"</div>\n\
</div>\n\
</div>\n\
</div>\n\
</div>\n\
</div>";
$('#main-home-page-inner').add(HTML(data));
callcloudinary(imgurl,title,touch_id);
callmasonry();
if(i == setarr.length-1){
localStorage.touchids=touchid_arr.join(",");
localStorage.searchresults=gcharmarr.join(",");
}
// document.getElementById("main-home-page-inner").innerHTML += html;
}
/* document.getElementById("fb"+touch_id).setAttribute("onclick","sharetofb('"+title+"','"+text+"','"+ct_domain+socialshare_url+"','"+social_domain+lcurl+touch_id+".jpg')");*/
}
document.getElementById("myAnchor").addEventListener("click", function (event) {
event.preventDefault();
openpopup('"+popupurl+"');
sendpym('"+touch_id+"','0');
});
})
.error(function(status, statusText, responseText) {
//console.log(statusText);
//console.log(responseText);
});
I would use .getElementsByTagName() to get an array of all anchor tags on the page, you can then loop through these adding a similar event listener to the one mentioned in your question.
I've create a Fiddle but the gist is:
var test = document.getElementsByTagName("a");
for(i = 0; i < test.length; i++ ){
test[i].addEventListener("click", function(e) {
e.preventDefault();
});
};
Mostly in React use like this:
const = someEventHandeler = (event) => {
event.preventDefault();
}

JQuery DOM get Binded attribudes

I have a code
$(".showerPr").on('click', '.prototypeDiv',function(){
});
HTML looks like
<div class='showerPr' data-id='3'>
<div class='prototypeDiv' data-id='5'><div>
</div>
Is there some solution to get showerPr data-id and prototypeDiv data-id seperately?
somethink like
$(this).attr('data-id');
$(this).before().attr('data-id');
:-D thank you.
.showerPr isn't before() the .prototypeDiv element, it's the parent element
var proto = $(this).data('id');
var shower = $(this).parent().data('id');
$(".showerPr").on('click', '.prototypeDiv',function(){
var proto = $(this).data('id');
var shower = $(this).parent().data('id');
$('#result').html('prototypeDiv : ' + proto + '<br />' + 'showerPr : ' + shower)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='showerPr' data-id='3'>
<div class='prototypeDiv' data-id='5'>Click Me !!!<div>
</div>
<br/><br/>
<div id="result"></div>
#adeneo is right, .showerPr is the parent element. You may want to check the Traversing Methods for jQuery.
Here are the snippets.
$(".prototypeDiv").on('click', function(){
alert($(this).data('id'));
alert($(this).parent().data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='showerPr' data-id='3'>
<div class='prototypeDiv' data-id='5'>123<div>
</div>

Replace Content with Javascript/Jquery

http://jsfiddle.net/bUjx7/31
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.fieldsgame1 {
display:none;
}
.fieldsgame2 {
display:none;
}
.fieldsgame3 {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.tablereplace a').click(function () {
$('.fieldsmatch').fadeOut(0);
$('.fieldsgame1').fadeOut(0);
$('.fieldsgame2').fadeOut(0);
$('.fieldsgame3').fadeOut(0);
var region = $(this).attr('data-region');
$('#' + region).fadeIn(0);
});
});
</script>
Put this into my WordPress header. CSS is fine. HTML is fine. Javascript isn't working. Help?
I'm not really sure what "isn't working" (since the Fiddle you're showing is working fine), but I did manage to clean up your code a bit. It's more DRY, fadeOut with speed of 0 is the same as hide()/show(), & jQuery.data() is used to retrieve the data-region.
HTML
<div class="tablereplace">
<a data-region="fieldsmatch" href="#">Match</a>
<a data-region="fieldsgame1" href="#">Game 1</a>
<a data-region="fieldsgame2" href="#">Game 2</a>
<a data-region="fieldsgame3" href="#">Game 3</a>
<div id="fieldsmatch" class="fieldsmatch">8-0</div>
<div id="fieldsgame1" class="fieldsgame">7-1</div>
<div id="fieldsgame2" class="fieldsgame">6-2</div>
<div id="fieldsgame3" class="fieldsgame">1-0</div>
</div>
CSS
.fieldsgame {
display:none;
}
JS
$('.tablereplace a').click(function () {
$('#fieldsmatch, .fieldsgame').hide();
var region = $(this).data('region');
$('#' + region).show();
});
JSFiddle.
=== UPDATE ===
Based on your comment, I found the following difference on the live page:
Match
Game 1
Game 2
Game 3
<div class="tablereplace">
<div class="fieldsmatch" id="fieldsmatch">8-0</div>
<div class="fieldsgame" id="fieldsgame1">7-1</div>
<div class="fieldsgame" id="fieldsgame2">6-2</div>
<div class="fieldsgame" id="fieldsgame3">1-0</div>
</div>
Your specified click function is based on the .tablereplace a selector. But, on your site, there isn't any a found inside the .tablereplace . In other words, your HTML is wrong.

How can I shorten this javascript code? show hide multiple divs

How can I shorten this code? Each css selector increases +1. All Bio's divs are hidden unless the .mug(x) is selected.
Thanks
<script type='text/javascript'>
$(document).ready(function () {
$(".mug1").click(function() {
$("#bios div").hide();
$(".bio1").show();
});
$(".mug2").click(function() {
$("#bios div").hide();
$(".bio2").show();
});
$(".mug3").click(function() {
$("#bios div").hide();
$(".bio3").show();
});
});
</script>
<h2>Meet the team</h2>
<div id="mugshots">
<img src="images/img-mugshot.jpg" alt="mug" class="mug1"/>
<img src="images/img-mugshot.jpg" alt="mug" class="mug2"/>
<img src="images/img-mugshot.jpg" alt="mug" class="mug3"/>
</div>
<div id="bios">
<div class="bio1"></div>
<div class="bio2"></div>
<div class="bio3"></div>
</div>
Something along these lines?
Change the html to this:
<div id="bios">
<div class="bio" data-id="1"></div>
<div class="bio" data-id="2"></div>
<div class="bio" data-id="3"></div>
</div>
Then your js to this:
$(".mug").click(function() {
$("#bios div").hide();
$(".bio[data-id='" + $(this).data("id") + "'", $("#bios")).show();
});
This way you could add as many mugs and bios as you like without having to add any more js.
Simplest way is a for loop
$(document).ready(function () {
for (var i = 1; i <= 3; i++) {
$(".mug" + i).click(function() {
$("#bios div").hide();
$(".bio" + i).show();
});
}
});
There may be a better way still that I'm not thinking of.
just use index and add as many as you want:
$('#mugshots>img').on('click', function() {
$("#bios div").hide();
var myIndex = $(this).index("#mugshots> img");
$("#bios> div").eq(myIndex).show();
});
a shorter version of this is:
$('#mugshots>img').on('click', function() {
$("#bios div").hide().eq($(this).index("#mugshots> img")).show();;
});
Use the .eq() and the index of your mugshots, assuming the first mugshot goes with the first bio, second mugshot with second bio, and so on.
http://api.jquery.com/eq/
Also, use a class to keep track of your active bio rather than calling hide on all bios for each update.
JS:
$(document).ready(function() {
$('#mugshots img').click(function() {
$('#bios .active').hide().removeClass('active');
$('#bios div').eq($(this).index()).show().addClass('active');
});
});
HTML:
<h2>Meet the team</h2>
<div id="mugshots">
<img src="images/img-mugshot.jpg" alt="mug"/>
<img src="images/img-mugshot.jpg" alt="mug"/>
<img src="images/img-mugshot.jpg" alt="mug"/>
</div>
<div id="bios">
<div></div>
<div></div>
<div></div>
</div>
try this:
$(document).ready(function () {
$("img[alt=mug]").each(function() {
$(this).click(function(){
var id = $(this).attr("class").substr(3, 1);
$("#bios div").hide();
$(".bio" + id).show();
});
});
});

Categories

Resources