Is there a way to select a component with multiple children, point to one of them and apply css properties or some class?
Let's say I have this div:
<div class="parent">
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</div>
I would like to apply a css property to the second div.
I've tried this:
$('.parent')[0].children[1].css('display', 'block')
But I am getting this error: Cannot read property 'children' of undefined
What I don't understant is that if I log $('.parent')[0].children[1] into the console I get the child div, so, I supposed that would be the way, but it seems that I am wrong.
Is there a way to do that?
When you use an array index on a jQuery object, it returns a DOM element, not a jQuery object, so you can't use jQuery methods on it. Use .eq() to keep it as jQuery objects.
$('.parent').eq(0).children().eq(1).css('display', 'block');
.parent div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</div>
You can use find method on parent to select all child div elements and then use eq method to select specific child by index.
You can also do that with selector such as $('.parent > div:eq(1)')
$('.parent').find('div').eq(1).css('color', 'red')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</div>
This code should work.
$(".container div").css("background-color", "red");
.container {
background-color: blue;
height: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Just give the second div an ID and instead of using div use #second-div-id.
Related
how can I extract the text-value of an element with class 'test' f.e. based on the numbering?
Here is an example:
console.log($('ex.test')[3].text())
Thx in advance
Either use .eq() that will return an element from the index of it or use a CSS selector like :nth-child().
console.log($('.test').eq(3).text());
console.log($('.test:nth-child(4)').text());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="test">div 1</div>
<div class="test">div 2</div>
<div class="test">div 3</div>
<div class="test">div 4</div>
</div>
I have the next code:
<div class="components_container">
<div class="first_group">Element 1</div>
<div class="first_group">Element 2</div>
<div class="first_group">Element 3</div>
<div class="second_group">Element 4</div>
<div class="second_group">Element 5</div>
<div class="second_group">Element 6</div>
</div>
And I would like to wrap both groups in different div tags, like this:
<div class="components_container">
<div class="group1">
<div class="first_group">Element 1</div>
<div class="first_group">Element 2</div>
<div class="first_group">Element 3</div>
</div>
<div class="group2">
<div class="second_group">Element 4</div>
<div class="second_group">Element 5</div>
<div class="second_group">Element 6</div>
</div>
</div>
To do what you are trying to accomplish, you can do this in pure javascript:
Get a reference to the container (this code implies that you have only one element with that class):
var container = document.querySelector(".components_container");
Create the two external divs, add the classes and append them to the container:
var first_cont = document.createElement("div");
var second_cont = document.createElement("div");
first_cont.classList.add("group1");
second_cont.classList.add("group2");
container.appendChild(first_cont);
container.appendChild(second_cont);
Get the divs with a specific class and change their parent (remove child / append child):
var first_elements = container.querySelectorAll(".first_group");
var second_elements = container.querySelectorAll(".second_group");
for (el of first_elements) {
container.removeChild(el);
first_cont.appendChild(el);
}
for (el of second_elements) {
container.removeChild(el);
second_cont.appendChild(el);
}
This will do what you want, but please, next time try to add some more information, like some context, the steps that you tried or where are you finding difficulties :)
I have a sortable list like this:
<div id = "sortable">
<div class = "sortableItem day">Monday</div>
<div class = "sortableItem" id="result1">Hotel 1</div>
<div class = "sortableItem" id="result2">Hotel 2</div>
<div class = "sortableItem" id="result3">Hotel 3</div>
<div class = "sortableItem" id="result4">Hotel 4</div>
<div class = "sortableItem" id="result5">Hotel 5</div>
</div>
I am trying to access different child elements of the div "sortable" but I only manage the first one - afterwards I get "undefined" returned.
So when I log:
sortable.childNodes[1]
I do get "Monday" returning in the console. But as soon as I change this to:
sortable.childNodes[2]
(or indeed any other index for that matter) I get undefined. I am sure I'm doing something incredibly basic wrong but any pointers would be greatly appreciated.
try using children instead of childNodes
sortable.children[1]
childNodes includes white-space. You'll want to verify that the child node at that index is an element before you try to grab its innerText (which may be as simple as if (sortable.childNodes[x].innerText) { /* use innerText */ }).
As other answers have already mentioned, you're accessing whitespace instead of the elements.
I put together a fiddle for you to get only the childNodes with a class of sortableItem :)
https://jsfiddle.net/joshmoxey/g9tebkzw/
const sortable = document.getElementById("sortable")
//create loopable array from childNodes
const childNodes = Array.from(sortable.childNodes)
//filter through the array and remove anything that doesn't have a class of sortableItem as the first class name)
const children = childNodes.filter((node) => node.className ? node.className.startsWith("sortableItem") : false)
//do something with children here
console.log(children)
The easiest way is to use a querySelector with the :nth-child pseudo selector
console.log(document.querySelector('#sortable > :nth-child(1)').textContent)
console.log(document.querySelector('#sortable > :nth-child(2)').textContent)
console.log(document.querySelector('#sortable > :nth-child(3)').textContent)
<div id="sortable">
<div class="sortableItem day">Monday</div>
<div class="sortableItem" id="result1">Hotel 1</div>
<div class="sortableItem" id="result2">Hotel 2</div>
<div class="sortableItem" id="result3">Hotel 3</div>
<div class="sortableItem" id="result4">Hotel 4</div>
<div class="sortableItem" id="result5">Hotel 5</div>
</div>
I have four div of same class, but I want to access each div when clicked only by class name for any further action only by java script/Jquery
<div class="myclass">something</div>
<div class="myclass">something 2</div>
<div class="myclass">something 4</div>
<div class="myclass">something 3</div>
Try using jquery class selector with on click handler
$(function() {
$('.myclass').on('click', function() {
alert($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">something</div>
<div class="myclass">something 2</div>
<div class="myclass">something 4</div>
<div class="myclass">something 3</div>
You can use the following jquery:
$(".myclass").click(function(e)
{
var div = this;
});
I have a div (main div) which contains several div elements(sub divs). I want to hide all inside div elements using Jquery. Can any body help me. But main div should display always.
Should be easy as:
$('#mainDiv > div').hide();
to hide only all direct children from #mainDiv or
$('#mainDiv div').hide();
to hide any descendant div of #mainDiv.
and also you can animate the hiding like this:
$('#mainDiv div').slideUp();
$('#mainDiv div').slideToggle();
$('#mainDiv div').fadeToggle();
these are simple jquery animations.
Try this way,works fine
<div style="text-align:center;background-color: lightblue;">Main div
<button id="checkButton"type="button" class="btn btn-primary">Check</button>
<div id="subdiv1" hidden>Sub Div 1</div>
<div id="subdiv2" hidden>Sub Div 2</div>
<div id="subdiv3" hidden>Sub Div 3</div>
<div id="subdiv4" hidden>Sub Div 4</div>
<div id="subdiv5" hidden>Sub Div 5</div>
</div>
<script>
$(document).ready(function(){
$("#checkButton").click(function(){
$("#subdiv1").toggle();
$("#subdiv2").toggle();
$("#subdiv3").toggle();
$("#subdiv4").toggle();
$("#subdiv5").toggle();
});
});
</script>