I've got:
<div id='someId'>
<div>
<div onclick='someFunction(event)'>
Text
</div>
</div>
</div>
someFunction(event){
var twoParentsUpId = ??????
}
How can I get this "someId" with the other two DIVs not having any IDs?
... not using jQuery.
This will do it for you https://jsfiddle.net/DIRTY_SMITH/jaer6zzd/
<div id='someId'>
<div>
<div onclick='someFunction(event)'>
Text
</div>
</div>
</div>
<script>
function someFunction(event){
var twoParentsUpId = event.target.parentElement.parentElement;
twoParentsUpId.style.backgroundColor = "red";
}
</script>
Related
How to hide other and left just one that is click?
I tried something like this, but this doesn't work since all my divs has different ids
$(document).ready(function() {
$('.campingTrips').click(function(e) {
var image = e.target,
interval,
height = 200,
width = 200,
z = $(this).css("z-index");
$(this).css("z-index", z + 10);
$('#product-container').addClass('disable-click');
$('.unhidden').not($(this).parent().parent()).addClass('noOpacity');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
<h1>Camping trips</h1>
</div>
<div id="cityBreaks">
<h1>City breaks</h1>
</div>
<div id="roadTrips">
<h1>Road trips</h1>
</div>
<div id="cruises">
<h1>Cruises</h1>
</div>
<div id="groupTours">
<h1>Group tours</h1>
</div>
<div id="girlsTrips">
<h1>Girls’ trips</h1>
</div>
I'm using Java, Spring Boot, this is how I'm trying to include jQuery
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/index.js}"></script>
Edit: NEW CODE
So my html is now like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>
<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>
<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>
And js like this:
$(document).ready(function () {
$('clickable').on('click', function () {
var current = $(this).attr('id');
$('clickable:not(#' + current + ')').hide();
})
})
Error from inspect console is:
Uncaught ReferenceError: $ is not defined
at index.js:119:1
You can hide all and then show the clicked one, will have the same effect.
$('.clickable').on('click', (e) =>
{
// Hide all
$('.clickable').hide();
// Show this
$(e.target).closest('div').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>
<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>
<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>
But i strongly suggest to use a specific class for selecting those div elements, or base your code in a parent container.
you can do following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
<h1>Camping trips</h1>
</div>
<div id="cityBreaks">
<h1>City breaks</h1>
</div>
<div id="roadTrips">
<h1>Road trips</h1>
</div>
<div id="cruises">
<h1>Cruises</h1>
</div>
<div id="groupTours">
<h1>Group tours</h1>
</div>
<div id="girlsTrips">
<h1>Girls’ trips</h1>
</div>
and
<script>
$(document).ready(function() {
$('div').on('click', function() {
var current = $(this).attr('id');
$('div:not(#' + current + ')').hide();
})
})
</script>
It will hide every other div except the one that is clicked.
Created 3 dynamic divs(sea_p,sea_p_div,div_btns), inside the third(div_btns) created 2 buttons
how can i change the text inside these dynamic buttons before adding to body?
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
$('body').append(div)
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
p.find(".req_check1").html('New Text');
p.find(".req_check2").html('New Text 2');
$('body').append(div)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Please try this.
window.onload = function() {
$(".req_check1").html('New Text');
$(".req_check2").html('New Text 2');
}
Thank you.
You can use text() method of jQuery, on the jQuery object of button whose text you want to change.
NOTE : Use it just after appending the p tag to the body.
var buttonWrap = $('.sea_p .div_btns button');
buttonWrap.eq(0).text("Text for button 1");
buttonWrap.eq(1).text("Text for button 2");
there is HTML code:
<div id="parent">
<p>111111</p>
<div id="child">
<p>22222</p>
<div id="childer">
<p>33333</p>
</div>
</div>
</div>
i want only select "22222" in paragraph of div with id=child.
but when use document.getElementById("child").textContent it return "22222" and "33333".
i dont want use jQuery, can anyone help me?
thanks
You can use querySelector(), more info here.
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
var value = document.querySelector('#child p').textContent;
console.log(value);
<div id="parent">
<p>111111</p>
<div id="child">
<p>22222</p>
<div id="childer">
<p>33333</p>
</div>
</div>
</div>
You can try using querySelector() which allows CSS like selector (#child p):
var elText = document.querySelector("#child p").textContent;
console.log(elText);
<div id="parent">
<p>111111</p>
<div id="child">
<p>22222</p>
<div id="childer">
<p>33333</p>
</div>
</div>
</div>
const setup = () => {
const child = document.querySelector('#child');
const p = child.querySelector('p');
console.log(p.textContent);
};
//load
window.addEventListener('load', setup);
<html>
<body>
<div id="parent">
<p>111111</p>
<div id="child">
<p>22222</p>
<div id="childer">
<p>33333</p>
</div>
</div>
</div>
</body>
</html>
document.getElementById("child").getElementsByTagName('p')[0].innerText;
From the code underneath, I want to remove the previous instances of codemirror, that is both "hello" and "hii" before I can add another instance.
The jQuery is not working.
Also, if I console.log($('#source').hasClass('.CodeMirror.cm-s-default')); it always shows me false, that is it can't find the classnames.
How can I do this?
If this is my html code:
<div class = "source" id="source" name="source">
<div class="result" id="result">
<div class="CodeMirror cm-s-default">hello</div>
<div class="CodeMirror cm-s-default">hii</div>
</div>
</div>
and my javascript, jquery is:
var first = document.getElementById("source").getElementsByClassName("CodeMirror cm-s-default");
var len1 = first.length;
for(var i = 0; i < len1; i++) {
if(first[i].className == "CodeMirror cm-s-default") {
first[i].parentNode.removeChild(first[i]);
}
}
you can do that to remove those elements contain .CodeMirror as a class:
javascript:
document.querySelectorAll(".CodeMirror").forEach(el => el.remove());
<div class="source" id="source" name="source">
<div class="result" id="result">
<div class="test">Not to remove</div>
<div class="CodeMirror cm-s-default">hello</div>
<div class="CodeMirror cm-s-default">hii</div>
</div>
</div>
Maybe simply like this?
$(function() {
$(".CodeMirror").remove();
});
Using jQuery can done like this:
$(".CodeMirror:contains('hello'), .CodeMirror:contains('hii')").remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="source" id="source" name="source">
<div class="result" id="result">
<div class="test">Not to remove</div>
<div class="CodeMirror cm-s-default">hello</div>
<div class="CodeMirror cm-s-default">hii</div>
</div>
</div>
Hello need some help to distribute multiple elements with same class to other multiple elements with same class. I think maybe .appendTo can help with this.
I want to move these:
...
<div class="button">
...
</div>
<div class="button">
...
</div>
<div class="button">
...
</div>
into these:
...
<div class="button_place">
...
</div>
<div class="button_place">
...
</div>
<div class="button_place">
...
</div>
so that I have these:
first button on first button_place and so on...
<div class="button_place">
<div class="button">
...
</div>
</div>
<div class="button_place">
<div class="button">
...
</div>
</div>
<div class="button_place">
<div class="button">
...
</div>
</div>
Select both sets, loop over one set, and append to the other set.
var buttons = $(".button"),
places = $(".button_place");
buttons.each(function(i, elem) {
places.eq(i).append(elem)
})
.button_place {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
b1
</div>
<div class="button">
b2
</div>
<div class="button">
b3
</div>
<div class="button_place">
</div>
<div class="button_place">
</div>
<div class="button_place">
</div>
Select all buttons and places. Then iterate over buttons and append them to corresponding places container.
jQuery version:
const $places = $('.button_place')
$('.button').each(function(i) {
$places[i].appendChild(this)
})
Pure JS version:
const buttons = document.querySelectorAll('.button')
const places = document.querySelectorAll('.button_place')
buttons.forEach(function(button, index) {
places[index].appendChild(button)
})
// NodeList.prototype.forEach is not supported in IE,
// convert NodeList to array first with slice, Array.from, etc.
You can do it using each function as:
https://jsfiddle.net/o2gxgz9r/6623/
$(".button_place").each(function(index,elem){
//$(elem).html($(".button").eq(0));
$(elem).append($(".button").eq(0));
})
use html function if you want to replace content and use append if you want to add content at the end.
Simply use with each() of $('.button_place') .and append($('.button').eq(a).clone()).html() its used to get the outerhtml of button
$('.button_place').each(function(a, b) {
$(this).append($('.button').eq(a).clone()).html()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button"> button</div>
<div class="button"> button</div>
<div class="button"> button</div>
<div class="button_place">button_place</div>
<div class="button_place">button_place</div>
<div class="button_place">button_place</div>