I have three similar sections. I want to select an element with a given class but only within the scope of the element I clicked.
My current code selects all the elements with the same class.
If I add an event handler on class mine, and some action needed to be done on target class, only for the inner2 within the scope of class one I clicked,
so how do i do it.
HTML:
<div class="one">
<div class="some">
<div class="mine"></div>
</div>
<div class="inner1">
</div>
<div class="inner2">
<div class="target"></div>
</div>
</div>
<div class="one">
<div class="some">
<div class="mine"></div>
</div>
<div class="inner1">
</div>
<div class="inner2">
<div class="target"></div>
</div>
</div>
Try this : you can make use of siblings() to get inner2 element and do your operation on it.
$(".mine" ).click(function() {
$(this).siblings('.inner2').slideToggle(function(){
if(temp==0){
$(this).closest(".proElement").addClass('darkBg');
temp=1;
}
else{
$(this).closest(".proElement").removeClass('darkBg');
temp=0;
}
});// end of slideToggle
}); //
use sibling
$(".mine" ).click(function() {
$(this).siblings('.inner2').slideToggle(function(){
if(temp==0){
$(this).closest(".proElement").addClass('darkBg');
temp=1;
}
else{
$(this).closest(".proElement").removeClass('darkBg');
temp=0;
}
});
});
demo
use below code . use find to search child element
$('.one').on('click',function(){
var inner2Obj = $(this).find('div.inner2');
inner2Obj.slideToggle(function(){
// your code
});
console.log(inner2Obj) // this will log inner2 object within clicked one DIV
});
You can also use .siblings() here:
$(".mine" ).click(function() {
$(this).siblings('.inner2').slideToggle(function(){
if(temp==0){
$(this).closest(".proElement").addClass('darkBg');
temp=1;
}
else{
$(this).closest(".proElement").removeClass('darkBg');
temp=0;
}
});// end of slideToggle
}); // end of click
Related
I have two divs... Then when I clicked the 1st div, i want to get the text inside of h3 of the 2nd div
Here is my codes... But none of the jquery code is working.. any help to fix my code, please... thanks
HTML
<div class="timeline-badge" style="background-image:url(images/couple-9.jpg);">CLICK ME</div>
<div class="timeline-panel">
qqqq
<div class="timeline-heading">
wwww
<h3 class="timeline-title">Hello</h3>
<span class="date"><i class="icon-calendar"></i>February 00, 2017</span>
</div>
<div class="timeline-body">
<p>III</p>
</div>
</div>
JQUERY / JAVASCRIPT
$('.timeline-badge').on('click', function() {
alert($(this).closest(".timeline-panel + div + h3").text());
alert($( '.timeline-badge > div:eq(0) + h3:eq(0)' ).children().text());
alert($(this).nextAll( '.timeline-heading').eq(0).innerhtml);
});
http://jsfiddle.net/rK4qc/119/
The .timeline-panel is next sibling of .timeline-badge. So you should use .next() to selecting it. Then use .find() to finding .timeline-title in it.
$('.timeline-badge').on('click', function() {
var text = $(this).next().find(".timeline-title").text();
console.log(text);
});
$('.timeline-badge').on('click', function() {
var text = $(this).next().find(".timeline-title").text();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeline-badge" style="background-image:url(images/couple-9.jpg);">CLICK ME</div>
<div class="timeline-panel">
qqqq
<div class="timeline-heading">
wwww
<h3 class="timeline-title">Hello</h3>
<span class="date"><i class="icon-calendar"></i>February 00, 2017</span>
</div>
<div class="timeline-body">
<p>III</p>
</div>
</div>
Use Jquery's siblings selectors https://api.jquery.com/siblings/
$('.timeline-badge').on('click', function() {
console.log($(this).siblings());
});
Go get it by the class name of h3
$('.timeline-badge').on('click', function() {
alert($(this).next().find('h3.timeline-title').text());
});
You can get the value of your h3 tag with:
$('div.timeline-panel div.timeline-heading h3.timeline-title').val();
use this code.
$(document).on("click",".timeline-badge",function() {
alert("H3 IS " + $('h3.timeline-title').text());
});
and check this fiddle for the code.
http://jsfiddle.net/rK4qc/121/
For the second div just add div for it and get the text user the .text() function.
this will work for you:-
$('.timeline-badge').on('click', function() {
alert($(this).next().find('h3.timeline-title').text());
});
I have a function that assigns dynamic classes to my div's. This function is a that runs on the page. After the page loads, all 10 of my primary 's have classes ".info1" or ".info2" etc...
I am trying to write a Jquery function that changes the class of the div you click on, and only that one. Here is what I have attempted:
$(".info" + (i ++)).click(function(){
$(".redditPost").toggleClass("show")
});
I have also tried:
$(".info" + (1 + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
And
$(".info" + (i + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
EDITED MY HTML: DIV RedditPost is actually a sibling to Info's parent
<div class="listrow news">
<div class="newscontainer read">
<div class=".info1"></div>
<div class="redditThumbnail"></div>
<div class="articleheader read">
</div>
<div class="redditPost mediumtext"></div>
</div>
My issue is two fold.
The variable selection for ".info" 1 - 10 isn't working because i doesn't have a value.
If I did target the correct element it would change all ".redditPost" classes instead of just targeting the nearest div.
Try like this.
$("[class^='info']").click(funtion(){
$(this).parent().find('.redditPost').toggleClass("show");
});
Alternative:
$('.listrow').each(function(){
var trigger = $(this).find("[class^='info']");
var target = $(this).find('.redditPost');
trigger.click(function(){
target.toggleClass("show");
});
});
Try this
$("div[class*='info']").click(function(){
$(this).parent().find(".redditPost").toggleClass("show")
});
Explanation:
$("div[class*='info'])
Handles click for every div with a class containing the string 'info'
$(this).parent().find(".redditPost")
Gets the redditPost class of the current clicked div
Since the class attribute can have several classes separated by spaces, you want to use the .filter() method with a RegEx to narrow down the element selection as follows:
$('div[class*="info"]').filter(function() {
return /\binfo\d+\b/g.test( $(this).attr('class') );
}).on('click', function() {
$(this).siblings('.redditPost').toggleClass('show');
});
.show {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listrow news">
<div class="newscontainer read">
<div class="info1">1</div>
<div class="redditThumbnailinfo">2</div>
<div class="articleheader read">3</div>
<div class="redditPost mediumtext">4</div>
</div>
</div>
I'm not sure the best way to word this, so hopefully this makes sense.
Currently, on my page, all my elements fadeIn on click. What I would like is for a few select elements in an id (#seqFade below) to fade in on their own when that parent fadeIn class is clicked.
I've figured out how to make both of these effects work on separate pages, but I can't figure out how to have them both occur on the same page / combine the two.
Here is more or less how my page is designed, and below is what I have so far for code.
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="fadeIn">
Bye.
</div>
</div>
SCRIPT
$(document).ready(function(){
//hides all fadeIns
$('.fadeIn').hide();
$(document).on('click',function() {
if('#seqFade') {
//sequential fadeIn function (works)
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow');
});
}
//fadeIn on click (works)
$('.fadeIn:hidden:first').fadeIn('slow');
})
.click();
Thank you so much in advance.
JSfiddle of full page //
JSFiddle of both effects working
Try this, just add a class on hidden at the beginning for the spans
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$(document).on('click',function() {
$('#seqFade span').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
http://jsfiddle.net/h67vk02w/2/
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<div class="fadeIn" id="bye">
Bye.
</div>
Javascript
$(function() {
$('.fadeIn').find('span').toggle();
$('#hello, #bye').toggle();
$(document).click(function() {
$('#hello').fadeIn('slow');
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow', function() {
$(document).unbind('click')
.bind('click', () => $('#bye').delay(300).fadeIn('slow'));
});
});
});
});
JSFiddle: http://jsfiddle.net/6mLgu3om/3/
Or like that?
Use the classes for this (add some fade/noFade classes to elements). ID must be unique. And after that just check if the element has that class like this. Now you have basically unlimited options to do this. Just add more classes / check and do something.
$(".class_of_element").hasClass("your_class")
I want to select the child of a div using jquery. I try with children() but didn't work
<div class="main" id="this_456" onclick="change(456)">
<div id="title">some text</div>
<div id="body">some text as well</div>
</div>
javascript
function change(id)
{
$('#this_'+id).children("#body").fadeOut();
}
Your code works if you specify 456 as the argument rather than this_456 (see: http://jsfiddle.net/aLxTz/).
However, since <div id="body"/> is identified by ID (#body) it's redundant to look for it inside and other element - it should be unique document-wide. Use the class="" attribute if you expect to have several instances of a body <div/>, e.g. <div class="body">...</div>.
Furthermore, note that the onclick handler has the this variable set to the context element. Since this is the element in question itself, you could write
<div class="main" id="this_456"> ... </div>
$(".main").click(function() {
$(this).chlidren(".body").fadeOut();
});
<div class="main" id="this_456" onclick="change(this)">
<div id="title">some text</div>
<div id="body">some text as well</div>
</div>
function change(elm) {
$(elm).children("#body").fadeOut();
}
FIDDLE
Try this code:
function change(id) {
$('#this_'+id+ ' > div').find("#body").fadeOut();
}
I have following structure
<div onClick="javascript:Myfunction('value');">
<div title="Mytitle"> </div>
</div>
Can I access in the javascript Myfunction, the title of the inner div.
There are no ids here.
If you do not want to change the html code then you can use this.
function MyFunction ( elem )
{
var child = jQuery(elem).find("div");
alert ( child.attr("title") );
}
<div onclick="MyFunction(this);">
<div title="Mytitle"> </div>
</div>
Otherwise try this
$(document).ready ( function () {
$('#divMain').click(function() {
var titleElem = $(this).find("div");
alert ( titleElem.attr("title") );
});
});
<div id="divMain" style="width: 100px; height: 100px;">
<div title="Mytitle">
</div>
</div>
Depends if you use any JavascriptLibraries like jQuery. If you do, you can select your objects via CSS selectors, which would be in your case
$('div[onclick] > div[title]')
You'd get your inner DIV element with it. If there are more elments that match this criteria, you could limit them even more by attribute values.
If it's the only div with the title you can use this selector:
$('div[title]')
The easiest solution would to add a class or id to the div with onClick defined (I suggest moving onlick to JS code as well)
<div class="myClass">
<div title="MyTitle"> ... </div>
</div>
And in JS:
$('.myClass').click(function() {
MyFunction('value');
});
Then you can find inner div with
$('.myClass div')