This question already has answers here:
Find nested element in query
(5 answers)
Closed 5 years ago.
I am after some assistance in passing the value of my span classes to a data attribute (data-groups) contained in their parent divs all with the same class (.item). Here is my current code.
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="value1"></span>Description</p>
</div>
</div>
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="another-value"></span>Description</p>
</div>
</div>
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="third-value"></span>Description</p>
</div>
</div>
<script type="text/javascript">
$(".item").attr("data-groups", function() {
return $('.caption p span').attr('class');
});
</script>
This works somewhat but it populates all data-groups attributes with "value1". I am wanting them all to receive the data attribute from their respective child span classes. Eg, First item div should have a 'data-groups'attribute of 'value1', second with 'another-value', etc.
I'm a little rusty with jquery but learning as I go. Any assistance is appreciated.
Try this:
$(".item").attr("data-groups", function() {
return $(this).find('.caption p span').attr('class');
});
Related
I want to move my div class="contentlinks" tag with its content, to place it in the div class="row" after the div class="col-12".
Here is the basic html architecture :
<span id="data">
<section id="" class="thesectionQ">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>
<div class="col-12 contentlinks">
<a class="btn">link1</a><a class="btn">link2</a>
</div>
</span>
Tags are dynamically created in js... my problem is that I can't seem to use appendChild ...
my problem is that I can't seem to use appendChild ...
I'm trying to target my section with a class="thesectionQ" in a variable as well as my div class="contentlinks" that I want to move :
for example...
var thedata2 = document.getElementById('data').getElementsByClassName('thesectionQ');
var thedata = document.getElementById('data').getElementsByClassName('contentlinks');
thedata2.appendChild(thedata);
but I have errors ... and too often
give section id so it become easy.
document.querySelector('#sectionId div.row')
.appendChild(document.querySelector('div.contentlinks'))
This question already has answers here:
Get index of element as child relative to parent
(6 answers)
Closed 2 years ago.
I need a simple script that would alert me with index number of certain div within a div.
Hovering over first box gives it's index (0) then another gives 1,2,3 etc.
Result I'm looking for is so third and fourth .box div would give their indexes within .box-container so 0 then 1 and not index of them within whole document. How would I approach such task? I know my code is close just not close enough.
$(".box").mouseover(function() {
console.log($(".box").index($(this)));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-container">
<div class="box">0</div>
<div class="box">1</div>
</div>
<div class="box-container">
<div class="box">2</div>
<div class="box">3</div>
</div>
You are searching .box class specific index() function to get index of element. There is issue due to its getting incremental ways index of element.
if you do using $this their index() it works.
Below is example :
$(".box").mouseover(function() {
console.log($(this).index());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-container">
<div class="box">0</div>
<div class="box">1</div>
</div>
<div class="box-container">
<div class="box">2</div>
<div class="box">3</div>
</div>
This question already has answers here:
Find the closest ancestor element that has a specific class
(6 answers)
Closed 2 years ago.
I have an HTML like -
<main>
<section>
<div class="parent">
<div class='level_1'>
<div class='level_2'>
<div class='level_3'>
<span class='click_here'></span>
</div><!--level 3-->
</div><!--level 2-->
</div> <!--level 1-->
</div> <!--parent-->
<section>
<section>
<!-- same as given above -->
<section>
<main>
See there is a span element of class click_here. So If user clicks to this span element I want to grab its grand parent element with having class parent by Javascript.
I know the basic solution like accessing e.parentElement.parentElement.parentElement.parentElement but this is not good because the clicked item might be in more deep level than given in example.
Is their any other solution by using Javascript ?
You can use mouseEvent.target.closest('.parent'); to fetch the closest .parent element of the clicked element and this will work for any arbitrary nesting level. Example:
let span = document.querySelector('span');
span.addEventListener('click', function(e) {
console.log(e.target.closest('.parent'));
});
span {
display: block;
width: 100px;
height: 100px;
background: tomato;
}
<main>
<section>
<div class="parent">
<div class='level_1'>
<div class='level_2'>
<div class='level_3'>
<span class='click_here'></span>
</div><!--level 3-->
</div><!--level 2-->
</div> <!--level 1-->
</div> <!--parent-->
<section>
<section>
<!-- same as given above -->
<section>
<main>
You could do e.target.closest('.parent') which lets you select the closest parent with whatever selector you're looking for.
I am using Uikit 2 (https://getuikit.com/v2) - and I need to solve a problem.
I got this markup: https://codepen.io/anon/pen/jZwNeB
Now I need to do the following. This part:
<div class="toc uk-panel uk-panel-box-primary sticky-toc" style="margin: 0px;"> ...</div>
Should be shown on the left side - right under the time datetime part. But - and this is important: I can not change the source itself. I can only add a class to toc uk-panel uk-panel-box-primary sticky-toc and add custom CSS and custom JS.
Any idea how to solve this?
var obj = document.getElementById("node");
var parent = document.getElementById("parent");
parent.appendChild(obj);
Here, node is the "toc uk-panel uk-panel-box-primary sticky-toc" element.
parent is the "uk-width-large-1-4" element
You can obviously use any other DOM method than the one I have used.
So, if you want to select the DOM of the entity using its class name class, you have to use getElementsByClassName("big long class name")[0] to correctly reference that entity
I just wanted to highlight the appendChild method
I believe the best answer is using CSS, but because I don't know about getukit and I don't know how to solve this using CSS only.
Here you can try with jQuery. Tell me if you want do this using pure JS.
<link href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css' rel='stylesheet'>
<div class="uk-grid">
<div class="uk-width-large-1-4">
<p class="uk-article-meta tm-article-date uk-margin-small selectionShareable">
<time datetime="2018-02-12T12:00:58+00:00">12.02.18</time>
</p>
</div>
<div class="uk-width-large-3-4">
<h1 class="uk-article-title">Test Content</h1>
<div class="uk-margin">
<div class="uk-sticky-placeholder" style="height: 52px; margin: 0px;">
<div class="toc uk-panel uk-panel-box-primary sticky-toc" style="margin: 0px;">
<ol class="toc-list ">
<li class="toc-list-item">
Testa
<ol class="toc-list is-collapsible">
<li class="toc-list-item">Test 2</li>
</ol>
</li>
</ol>
</div>
</div>
<p class="selectionShareable">Test Content.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
function recreate(){
let newElem = $('.sticky-toc').clone();
$('.sticky-toc').remove();
$('.tm-article-date').after(newElem);
}
recreate();
})
</script>
This question already has an answer here:
jQuery remove last-child of a class
(1 answer)
Closed 6 years ago.
So I'm trying to remove the last element in my DOM with a specific class but I'm not having much luck. I can remove the class entirely, but not last one by itself. Any help would be great
<div class="banner banner-1"></div>
<div class="banner banner-2"></div>
<div class="banner banner-3"></div>
<div class="banner banner-4"></div>
<div class="banner banner-3"></div>
<div class="banner banner-5"></div>
Sorry, forgot to paste my other code in:
var classToRemove = 'banner-3';
document.removeChild(document.getElementsByClassName(classToRemove))
For example, I have 6 banners, but banner 3 is repeated. How do I get the last banner-3 and remove it without affecting the first one?
Thanks!
// access all elements by class
var ele = document.getElementsByClassName('banner');
// find last element
var lastEle = ele[ ele.length-1 ];
//--- do what you need to do with the element
or
var ele = document.querySelectorAll(".banner .banner_3");
var lastEle = ele[ ele.length-1 ];
lastEle.parentNode.removeChild(lastEle);
You can get list by getElementsByClassName then in iteration remove them but not first
for(var i=1;i<document.getElementsByClassName('banner-3').length;i++)
document.getElementsByClassName('banner-3')[i].remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner banner-1">1</div>
<div class="banner banner-2">2</div>
<div class="banner banner-3">3</div>
<div class="banner banner-4">4</div>
<div class="banner banner-3">3</div>
<div class="banner banner-5">5</div>