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>
Related
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 have a project where I need to copy text from multiple containers and add it other containers.
Specifically, I have multiple question and answer texts in one place on a HTML page and I need to copy the text and place it into a different corresponding place on the page.
I've setup a codepen to better explain what I need (demoed using 4 questions but in the project I have there are 20 questions):
https://codepen.io/voodoo6/pen/xMRKpr
I need all the 'source' text to replace the 'target' text in the corresponding positions eg. .target > q1 and .target > a1 needs replacing with the HTML text of .source > q1 and .source > a1
My JS/Jquery skills have failed me when trying to get the index of the each question and match it to the corresponding div – eg. making sure only question 2's source text gets placed in question 2's target.
Can anybody help me? Many thanks!
This example might help:
$(function() {
$(".source-item").each(function(i, el) {
var q = $("div[class*='q']", el).text();
var a = $("div[class*='a']", el).text();
$(".target-item div.q" + (i + 1)).html(q);
$(".target-item div.a" + (i + 1)).html(a);
});
});
.target-item {
margin-bottom: 20px;
color: red;
}
.source-item {
margin-bottom: 20px;
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="target-item">
<div class="target q1">Question 1 Text Target</div>
<div class="target a1">Answer 1 Text Target</div>
</div>
<div class="target-item">
<div class="target q2">Question 2 Text Target</div>
<div class="target a2">Answer 2 Text Target</div>
</div>
<div class="target-item">
<div class="target q3">Question 3 Text Target</div>
<div class="target a3">Answer 3 Text Target</div>
</div>
<div class="source-item">
<div class="source q1">Question 1 Source Text</div>
<div class="source a1">Answer 1 Source Text</div>
</div>
<div class="source-item">
<div class="source q2">Question 2 Source Text</div>
<div class="source a2">Answer 2 Source Text</div>
</div>
<div class="source-item">
<div class="source q3">Question 3 Source Text</div>
<div class="source a3">Answer 3 Source Text</div>
</div>
Hope that helps.
Try select the element having a class starts with 'a', have a variable (let data='') initially set empty '' and than call .each() append all the text() into that and on finish of .each(). Last set that data into text() of the target container.
let data=''
abc = ()=> {
$().each(()=>{
data = $(this).text()
})
$().text(data)
}
You can go easy with the selection of answer by adding 'answer' as a class where your class 'a' as prefix and answer number remains there. Further for div content try with html() or innerHtml() ?! in place of text()
I've this loop in WordPress that displays post.
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1"></div>
<div class="child-2">
<div class="sub-child">
</div>
</div>
</div>
This 'parent-div' is in loop and it repeats 20-30 times for each post. For some of the posts, sub-child div would have no content, and in that case I want to hide 'child-1' div just for that particular post.
Solution in jQuery, JavaScript or PHP is fine.
Hope that makes sense.
Thanks.
You can try following
$(".parent-div").each((i,e) => {
if(!$(e).find(".child-2 .sub-child").text().trim()) $(e).find(".child-1").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1">Text 1</div>
<div class="child-2">
<div class="sub-child">
</div>
</div>
</div>
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1">Text 2</div>
<div class="child-2">
<div class="sub-child">
Some text
</div>
</div>
</div>
Try this with jQuery, where you can iterate over each parent div and check for text. if text length is zero then hide child div
$(function(){
$(".parent-div").each(function(){
var text = $(this).find(".child-2 > .sub-child").text();
if(text.length==0) {
$(this).find(".child-1").hide();
}
});
});
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');
});
For the life of me I can't figure out how to access the first div with text "I want this one" starting with the id of div1
My attempt:
$("#div1").first().first().html();
Here is an example
<div id="div1">
<div class="row">
<div class="another">I want this one</div>
<div class="another">Not this one</div>
</div>
</div>
Try this
1.
$("#div1 .another:first").html();
2.
$("#div1 .another").first().html();
3.
$("#div1 .another").eq(0).html();
Example
If you literally want the first element within the first element, you can do it in one selector using pure javascript selectors for performance like so:
var row = $('#div1 > div:first-child > div:first-child');
alert(row.text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div1">
<div class="row">
<div class="another">I want this one</div>
<div class="another">Not this one</div>
</div>
<div class="row">
<div class="another">Another one</div>
<div class="another">Yet another one</div>
</div>
</div>