how to access elements inside a variable named div - javascript

var temp = $('#temp');
$('button').on('click', function(){
temp.html($('#wrap').html());
temp('.elmark').removeClass('elact'); // error
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div id='wrap'>
<div class='elmark elact'>R</div>
</div>
<div id='temp'></div>
how to access '.elmark' inside temp using temp?

var temp = $('#temp');
$('button').on('click', function(){
temp.html($('#wrap').html());
temp.find('.elmark').removeClass('elact');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div id='wrap'>
<div class='elmark elact'>R</div>
</div>
<div id='temp'></div>

You can use the second argument of the jQuery selector $() to specify the context. This way you'll find all elements which match the selector which are descendants of temp (ie the context):
var temp = $('#temp');
$('button').on('click', function() {
temp.html($('#wrap').html());
$('.elmark', temp).removeClass('elact');
});
.elact {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div id='wrap'>
<div class='elmark elact'>R</div>
</div>
<div id='temp'></div>

Related

track div class and data-id="" in javascript (jquery) as an example

there is an example
<button id="tri" style='display: block;'>add</button>
<div id="box" style='display: none;' >
tracked by id
$('#tri').on('click', function(){
var e = document.getElementById('box');
var b = document.getElementById('tri');
if(e.style.display == 'none')
$("#box").slideDown();
b.style.display = 'none';
})
need to do the same so that this button tracks but only class and data-id
<div class="block_view" data-id="52" style='display: none; ></div>
what i tried did not work
<button class="editblock" data-id="51">edit</button>
<div class="block_edit" style="display: none;" data-id="51"></div>
<script>
$('body').on('click', '.editblock', function() {
var $this = $(this),
id = $this.attr('data-id');
var b = $('.block_view[data-id=id]');
if(b.style.display == 'none')
b.style.display = 'block';
})
</script>
what am I doing wrong?
The variable id contains dynamic data but you are using that as a string, you should form the selector in a proper way.
b refers to a jQuery element, you should use .css() instead of style property.
Try the following way:
$('body').on('click', '.editblock', function() {
var $this = $(this),
id = $this.attr('data-id');
var b = $('.block_view[data-id='+id+']');
if(b.css('display') == 'none')
b.css('display', 'block');
else b.css('display', 'none');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="editblock" data-id="51">edit</button>
<div class="block_view" data-id="51" style='display: none;' >block_view</div>
You have to insert the id variable in to selector, you are just putting the literal sting id in it. Also jQuery returns a jQuery object not an element, so you can use document.querySelector instead.
var b = document.querySelector('.block_view[data-id="'+id+'"]');
You can take data-id using $(this).data('id'); and the style by $(this).css("display"). you can find all div with the data-id and show/hide based on that
$(".editblock").click(function() {
var id=$(this).data('id');
console.log(id)
var styles = $(this).css("display");
console.log(styles)
$("div").each(function(){
if($(this).attr('id') == id && $(this).css("display")=="none") {
$(this).css('display','block');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="editblock" data-id="51">edit</button>
<div class="block_edit" >
<div id="51" style="display:none">div1</div>
<div id="52" style="display:none">div2</div>
<div id="53" style="display:none">div3</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button class="editblock" data-id="51">edit</button>
<div class="block_edit" style="display: none;" data-id="51"></div>
<div class="block_view" data-id="51" style='display: none;'>Demo</div>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$('.editblock').click(function(){
var id = $(this).attr('data-id');
var b = $('.block_view[data-id='+id+']');
if($(b).css('display')=='none'){
$(b).css('display','block')
}
});
</script>
</html>

Only getting parent tag name, not child on click event using prop("tagName"). Why?

I want to get the tags name when I click on them, I have applied a common class on each tag. Now the proplem is when ever I click on p tag or h1 it always gives the parent name.
$(function(){
$('.r').click(function(event) {
// $('.r').each(function() {
event.stopPropagation();
var $detect = $('.r').prop('tagName');
// alert($detect);
console.log($detect);
});
// })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
<h1 class="r">Title H1</h1>
<p class="r">Para</p>
</div>
$(this) instead of $('.r')-
$(function() {
$('.r').click(function(event) {
// $('.r').each(function() {
event.stopPropagation();
var $detect = $(this).prop('tagName');
// alert($detect);
console.log($detect);
});
// })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
<h1 class="r">Title H1</h1>
<p class="r">Para</p>
</div>
$('.r') will always give you the first-element.
So
Either Use $(this):-
$(function(){
$('.r').click(function(event) {
event.stopPropagation();
var $detect = $(this).prop('tagName');//$(this) will give you current clicked object
console.log($detect);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
<h1 class="r">Title H1</h1>
<p class="r">Para</p>
</div>
Or You can use $(event.target) also:-
$(function(){
$('.r').click(function(event) {
event.stopPropagation();
var $detect = $(event.target).prop('tagName');
console.log($detect);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
<h1 class="r">Title H1</h1>
<p class="r">Para</p>
</div>
event.target will give the current element on which event perfom actually.
Change var $detect = $('.r').prop('tagName'); to var $detect = $(this).prop('tagName'); and you will get it.
When you use the selector $('.r'), by default, you are working with the first element of the returned array(<div class="r">).
$(function() {
$('.r').click(function(event) {
// $('.r').each(function() {
event.stopPropagation();
var $detect = $(this).prop('tagName');
// alert($detect);
console.log($detect);
});
// })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
<h1 class="r">Title H1</h1>
<p class="r">Para</p>
</div>

jquery not getting class name of elements

I have the following code but for some reason jQuery does not pick the elements class name, I understand that if the element has more than one class calling .attr('class') won't return them but the .hasClass('class-name') should be able to identify if the element has the class name.
My problem is that jquery returns class name as undefined(I got this from the line commented.).
How can I make the all other div children of the #parent, that do not have class the-one to have a yellow background.
$(document).ready(function()
{
var j = $('#parent> div').size();
for(var i =0;i<j;i++)
{
//alert($('#parent> div').children().eq(i).attr('class'));
if(!$('#parent> div').children().eq(i).hasClass('the-one'))
{
$('#parent> div').children().eq(i).css('background','yellow')
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "parent">
<div class = "one the-one">one</div>
<div class = "two">two</div>
<div class = "three">Three</div>
<div class = "four">Four</div>
</div>
The children() call is redundant as none of the div elements have any child elements. Remove that and the code works:
$(document).ready(function() {
var j = $('#parent> div').size();
for (var i = 0; i < j; i++) {
//alert($('#parent> div').eq(i).attr('class'));
if (!$('#parent> div').eq(i).hasClass('the-one')) {
$('#parent> div').eq(i).css('background', 'yellow')
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
<div class="one the-one">one</div>
<div class="two">two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
Also note that you can tidy the logic in your JS using each() with the this keyword to reference the element in the loop:
$('#parent > div').each(function() {
if ($(this).hasClass('the-one'))
$(this).css('background', 'yellow')
});
The problem is $('#parent> div') returns the div children of #parent so calling children() again does not return any elements.
You can use a simple jQuery selector instead of a loop like
$(document).ready(function() {
$('#parent> div:not(.the-one)').css('background', 'yellow')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
<div class="one the-one">one</div>
<div class="two">two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
But you can just use css for this, no need to use jQuery
#parent> div:not(.the-one) {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
<div class="one the-one">one</div>
<div class="two">two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
$(document).ready(function() {
$('#parent > div').each(function(){
var classtheone = $(this).hasClass('the-one');
if(!classtheone){
$(this).css('background-color', 'yellow')
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "parent">
<div class = "one the-one">one</div>
<div class = "two">two</div>
<div class = "three">Three</div>
<div class = "four">Four</div>
</div>
Try this way
Why not try a simpler method?:
$("#parent > div").not(".the-one").css("background", "yellow");
More info about jQuery's .not method...
Try this
$("#parent div").each(function(){
var me=$(this);
if(me.hasClass("the-one")) { me.css({"background-color" : "yellow"}); }
})
As written already in other answers, your children() call is the problem, I suggest using the following solution with each() as it is simpler
$(document).ready(function()
{
$('#parent div').each(function( i ) {
if ( !$(this).hasClass('the-one')) {
$(this).css('background','yellow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "parent">
<div class = "one the-one">one</div>
<div class = "two">two</div>
<div class = "three">Three</div>
<div class = "four">Four</div>
</div>

How to move div element inside another div element?

var $selected = $();
var $itemLv1 = $("#create-summary .lv1");
$itemLv1.click(function(){
$selected = $(this);
$(this).toggleClass('clicked').siblings().removeClass('clicked');
});
$("#moveUp").click(function(){
$selected.add($selected.nextUntil(":not(.lv2)"))
.insertBefore($selected.prevAll(".lv1:first"));
});
$("#moveDown").click(function(){
$selected.add($selected.nextUntil(":not(.lv2"))
.insertAfter($selected.nextAll(".lv1:first"));
});
.clicked{
color: red;
font-weight:700;
}
.lv2, .lv3 {
margin-left:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="create-summary">
<div class="lv1"> Introduction</div>
<div class="lv1">1. AAA</div>
<div class="lv1">2. BBB</div>
<div class="lv1">3. CCC
<div class="lv2">3.1 aaa</div>
<div class="lv2">3.2 bbb</div>
<div class="lv2">3.3 ccc</div>
<div class="lv2">3.4 ddd
<div class="lv3">3.4.1 xxxxx</div>
<div class="lv3">3.4.2 yyyyy</div>
<div class="lv3">3.4.3 zzzzz</div>
</div>
</div>
<div class="lv1">4. DDD</div>
<div class="lv1">5. EEE</div>
</div>
<button type="button" id="moveUp">Up </button> /
<button type="button" id="moveDown">Down</button>
Now, I can move up or down for lv1 element with its child element.
However, how to only move an div element inside the child div?(only in lv3 or lv4 even lv5 or lv6)
Fir example, I want to move "ccc" up only in lv2 or move xxxxx only in lv3.
Is there any way can do that?
I assume that you want a functionality like this,
var $selected = $();
var $itemLv1 = $("#create-summary [class^=lv]");
$itemLv1.click(function (e) {
$selected = $(this);
var x = $(this).toggleClass('clicked');
$("[class^=lv]").not(x).removeClass("clicked child").addClass("child");
x.siblings().removeClass('clicked');
e.stopPropagation();
});
$("#moveUp").click(function () {
$selected.insertBefore($selected.prev("[class^=lv]"));
});
$("#moveDown").click(function () {
$selected.insertAfter($selected.next("[class^=lv]"));
});
DEMO

javascript if div equals then

how do you make it in javascript on page load like, if div1 equals YES then div2 must display "You Said YES"
<div class="div1">YES</div>
<div class="div2"></div>
If you want it in plain javascript, you can use body.onload like this:-
HTML:-
<body onLoad="onbodyload()">
<div id="div1">YES</div>
<div id="div2"></div>
</body>
Javascript:-=
function onbodyload(){
var d1 = document.getElementById('div1');
var d2 = document.getElementById('div2');
if(d1.innerHTML==='YES'){
d2.innerHTML='You Said Yes!';
}
};
Plunkr here.
Use onload event of body and do desired operation. Add id to the div for easy manipulation.
document.body.onload=function(){
//first element with class div1
var div1=document.getElementsByClassName('div1')[0];
if(div1.innerHTML=="YES"){
//first element with class div2
document.getElementsByClassName('div2')[0].innerHTML="You said Yes";
}
}
<body>
<div class="div1" id="div1">YES</div>
<div class="div2" id="div2"></div>
</body>
$('.div2').show().text("You said yes!");
$(function() {
if ($('.div1').text() == "YES") {
$('.div2').text("You said yes!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div1">YES</div>
<div class="div2"></div>

Categories

Resources