I'm new to jQuery but am hoping to replace a <div> with another that contains a slideshow when I click on a link. The problem with my code however is that when I click the link, the <div> I want to load isn't showing. Instead I just see div.slidesContainer for example.
My HTML:
<div id="leftText">
<h2>Heading.</h2>
<p>Text. <a href="/" id ="startSlide" %>'Learn more.'</a></p>
</div>
<div id="slide">
<div class="slides_container">
<div>
<h1>Slide heading.</h1>
<p>Slide text.</p>
</div>
</div>
</div>
My jQuery:
$(function(){
$("a#startSlide").click(function(){
$('div#leftText').replaceWith('div#slide');
return false;
});
});
Here's a jsFiddle if it'll help: http://jsfiddle.net/HR43b/
You need to pass an HTML or jQuery object to replaceWith: http://api.jquery.com/replaceWith/
.replaceWith( newContent )
newContentThe content to insert. May be an HTML string, DOM element,
or jQuery object.
.replaceWith( function )
functionA function that returns content with which to replace the set
of matched elements.
String:
$('div.inner').replaceWith('<h2>New heading</h2>');
Object:
$('div.third').replaceWith($('.first'));
Callback:
$('div.container').replaceWith(function() {
return $(this).contents();
});
You have to pass a selector, not a string:
$(function() {
$("a#startSlide").click(function() {
$('div#leftText').replaceWith($('#slide'));
$('#slide').css('visibility', 'visible');
return false;
});
});
Demo: http://jsfiddle.net/HR43b/3/
Try this.
$('div#leftText').replaceWith('<div id="slide"></div>');
Or
$('div#leftText').replaceWith($('div#slide'));
Check this:
div#slide {
visibility:hidden;
}
your <div> is hidden.. before replacing with other content change its behavior to visible.
and then use replaceWith
your altered jsfiddle
$(function(){
$("a#startSlide").click(function(){
$('div#slide').css('visibility','visible');
$('div#leftText').replaceWith($('div#slide'));
return false;
});
});
Related
I have the below markup and I am trying to get the href but always getting undefined. Any help is appreciated.
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>
$container = $('.wrapper');
$container.on('click', '.bottomP', function (event) {
console.log($(this).closest('a').attr('href'));
});
Assuming that you fix the class/ID issue noted in the comments by Mohammad you could use:
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>
Aside from what Mohammad mentioned about needing to use .wrapper instead of #wrapper. I recommend using .find() instead of .closest(). .closest() does not work in IE, but that might not be an issue for you. you can also do something like this:
$("div.wrapper").on('click', '.bottomP', function () {
console.log($("div.wrapper a:first").attr('href'));
});
This will grab the first <a> tag inside the wrapper div.
I do not have access to jquery. I'm trying to implement an accordion, but the content element is not immediately after the header. It is something similar to the following:
<div class="header">...</div>
<div>
<div class="content">
So I'm adding a function to handle an onclick event on the header, which needs to then obtain the next element in the HTML source code that has the content class. How can I achieve that?
You can achieve this using querySlector on the clicked header node
<div class="header">
<div>
<div class="content">
[].forEach.call(document.querySelectorAll('.header'), function(header) {
header.addEventListener('click', function(e) {
var content = this.querySelector('.content');
// here, "this" is the header div, and "content" is the content div
// do majick accordion things here
});
});
How about using recursive function and nextSibling [get next element (not children)]
<div class="header" onclick="hasClass(this)">...</div>
<div>
<div class="content"></div>
</div>
<script>
function hasClass(e){
if(e.nextSibling.children === undefined || e.nextSibling.children.length == 0){
hasClass(e.nextSibling); //go next till find class
}
else{
if(e.nextSibling.children[0].className == "content"){
console.log(e.nextSibling.innerHTML); //get class content html
}
}
}
</script>
You can get this by
var contentDiv= document.getElementsByClassName("content");
try this document.getElementById(header).getElementsByClassName('content');
I have the following HTML fragment.
<div class="diagram-frame">
<div class="diagram">
<span class="diagram-name">Drawing Objects</span>
<svg>...lots of child elements...</svg>
</div>
<div class="diagram-name">
<a class="idlink" title="Drawing Objects (data models)" href="...">NA - Drawing Objects</a>
</div>
</div>
Currently, I use this jQuery selector to detect what has been clicked on:
jClicked.add(jClicked.parents()).is('div.diagram-frame')
jClicked is jQuery object containing the clicked element.
But I need to exclude clicks on the diagram-name div. How can I add negation using the .not('div.diagram-name') function call?
Since .is() matches a css selector, why not use the css :not() pseudo, and do all in one command?
jClicked.add(jClicked.parents()).is('div.diagram-frame:not(.diagram-name)')
Like this?
jClicked.add(jClicked.parents())
.not(jClicked.$('div.diagram-name'))
.is('div.diagram-frame')
Note, Not certain about jClicked object ?
Try
$(function() {
var jClicked = [];
$(".diagram-frame").on("click", function(e) {
if (!$(e.target).parent().is("div.diagram-name")) {
jClicked.push(e.target);
console.log($(jClicked));
alert(jClicked.length);
}
});
});
$(function() {
var jClicked = [];
$(".diagram-frame").on("click", function(e) {
e.preventDefault();
if (!$(e.target).parent().is("div.diagram-name")) {
jClicked.push(e.target);
console.log($(jClicked));
alert(jClicked.length);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="diagram-frame">
<div class="diagram">
<span class="diagram-name">Drawing Objects</span>
<svg>...lots of child elements...</svg>
</div>
<div class="diagram-name">
<a class="idlink" title="Drawing Objects (data models)" href="...">NA - Drawing Objects</a>
</div>
</div>
jsfiddle http://jsfiddle.net/guest271314/2myjbuhL/
I have my code like this. It is supposed to show like horizontal buttons with dates. When the user clicks on one of that buttons, the box expands itself showing the pictures in it.
I'm trying to get the first child ID of the article clicked with jquery to be able to show the gallery_items with the first child ID without the "_title" at the end. But I get undefined.
My html:
<section id="gallery">
<article class="gallery_date">
<div id="1389848400_title">16-01-2014</div>
<div class="gallery_items" id="1389848400">
261689_10150238069156283_4353481_n.jpg<br>
IMG_4667.jpg<br>
millenium2.png<br>
</div>
</article>
<article class="gallery_date">
<div id="1389762000_title">15-01-2014</div>
<div class="gallery_items" id="1389762000">
IMG_4661.jpg<br>
</div>
</article>
<article class="gallery_date">
<div id="1389675600_title">14-01-2014</div>
<div class="gallery_items" id="1389675600">
bcn.png<br>
logoenmedio.png<br>
</div>
</article>
</section>
My Jquery:
$().ready(function() {
$(".gallery_date").click(function(event) {
console.log($(".gallery_date:first-child").attr("id"));
});
});
Thanks
"I'm trying to get the first child ID of the article clicked with jquery to be able to show the gallery_items with the first child ID without the "_title" at the end."
Do this:
$(this).children().first().prop("id").split("_")[0];
Or without jQuery so it's not so verbose:
this.children[0].id.split("_")[0];
But if that's the only need for the ID, then you could just select the element with .children() by its class:
$(this).children(".gallery_items")
the first child ID without the "_title".
You can use .replace() to remove '_title' or you can use .split()
$(document).ready(function() {
$(".gallery_date").click(function(event) {
var id = $(this).children().first().attr("id")
console.log(id.replace('_title',''));
console.log(id.split("_")[0]);
});
});
Try this:
$(document).ready(function() {
$(".gallery_date").click(function(event) {
console.log($(this).find('.gallery_items:first-child').attr("id"));
});
});
$(".gallery_date").click(function(event) {
console.log($(this).children().first().attr("id"));
});
If your html is structured the way it is, you can also just use the .next() method to get the gallery_items div, like this, so you don't have to worry about getting IDs and retrieving the DOM elements again:
$(document).ready(function() {
$(".gallery_date").click(function() {
$(this).next(".gallery_items").slideDown();
});
});
I have the following HTML code within the body:
<div id="hidden">
</div>
<div id="mainContianer">
<div id="firstChildDiv">
</div>
</div>
I am using the following code to get the child
$("div:first-child").attr('id')
But this returns "hidden" when I want it to return firstChildDiv, I have tried things like...
$("div[mainContainer ] div:first-child").attr('id')
$("div[id=mainContainer ] :first-child").attr('id')
$("#mainContainer :first-child").attr('id')
I know its a simple thing to do, but cant seem to see where I am going wrong...
Thanks
Your last selector
$("#mainContainer :first-child").attr('id')
works fine, if you correct the typo in the HTML (see this fiddle). It says mainContianer instead of mainContainer.
But, anyway, why don't you select simply by the id, if that element has an id?
$( '#firstChildDiv' )
$('#mainContainer > div:first-child').attr('id');
Try this,
$("#mainContianer:first-child").attr("id")
Check there is no space before ':'
Actually, you have a typo there in your html
<div id="mainContianer">
should be
<div id="mainContainer">
Then you can do
$("#mainContainer div:first-child").prop('id')
This uses prop rather than attr, which is slower and old jQuery Syntax
This is working for me....
$(document).ready(function(){
var a =$("#mainContainer div:first-child").attr('id');
alert(a);
});
this all return you first child of parent--in your case replace parent by mainContianer
$('#parent').children(":first")
$('#parent').children(":first-child")
$( $('#parent').children()[0] )
$('#parent').find(":first")
$('#parent').find(":nth-child(1)")
try - Child Selector (“parent > child”)
$("div > div").attr('id')
also try out
$("div div:first-child")
<html>
<head>
<script>
function getDiv(){
alert("answer = "+$('#mainContianer div:first-child').attr('id'));
}
</script>
</head>
<body>
<div id="hidden"></div>
<div id="mainContianer">
<div id="firstChildDiv">
</div>
</div>
<button onclick="getDiv()">click</button>
</body>
<html>
SCRIPT
<script language="JavaScript">
jQuery(document).ready(function($) {
$("#MY_BUTTON").click(function(event) {
$("div#PARENT_DIV").find("#CHILD_DIV").hide();
});
});
</script>
HTML CODE
<div id="PARENT_DIV">
<h1 class="Heading">MY HTML PAGE TEST</h1>
<br />
<div id="CHILD_DIV">THIS IS MY CHILD DIV</div>
</div>
<div class="MY_BUTTONS">
<a class="MySubmitButton" id="MY_BUTTON">
<span>Test it!</span>
</a>
</div>
for now in 2020 with jquery it can be like:
function myClickOnDiv(divPrm) {
let div=$(divPrm);
let targetElement=div.find('#my_id')
}
if say you div looks like this:
<div onclick=myClickOnDiv(this)><label id="my_id"></label></div>