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>
Related
Well, I have n elements with the class "class_one"
and certain other elements with the class "class_two".
These elements are nested and in some cases there are other elements in that nest, what I need is to select the next element with a specific class.
let class_one = document.querySelectorAll('.class_one');
class_one.forEach(element => {
element.addEventListener('click',()=>{
console.log("From this element, the next one containing the class class_two");
})
});
<div class="class_one">
click 1
</div>
<div class="class_two">elemento 1</div>
<div class="class_one">
click 2
</div>
<div class="class_four"></div>
<div class="class_two">elemento 2</div>
<div class="class_one">
click 3
</div>
<div class="class_six"></div>
<div class="class_two">elemento 3</div>
<div class="class_one">
click 4
</div>
<div class="class_five">click 5</div>
<div class="class_two">elemento 4</div>
<div class="class_one">
click 6
</div>
<div class="class_two"></div>
Personally, I would like an answer without using Jquery, but all are welcome.
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.
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 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;
});
Can somebody please tell me why this script is not working? It is supposed to work, but it doesn't, I am getting the id correctly, but Divs are not displaying properly. My idea is to display one div based on the click, and hide the other Divs.
Script
$(document).ready(function() {
$("a").live("click", function(){
var idV = $(this).attr("id");
alert(idV);
$("#"+idV+"div").css("display","block");
return false;
});
});
HTML
Solution 1
Solution 2
Solution 3
Solution 4
<br />
<div id="solution1" style="display:none;">Solution 1</div>
<div id="solution2" style="display:none;">Solution 2</div>
<div id="solution3" style="display:none;">Solution 3</div>
<div id="solution4" style="display:none;">Solution 4</div>
Your div ids are wrong.
Try:
<div id="solution1div" style="display:none;">Solution 1</div>
instead of
<div id="solution1" style="display:none;">Solution 1</div>
Edit:
JSBIN: Preview
JSBIN: Source Code
Solution 1
Solution 2
Solution 3
Solution 4
<br />
<div>
<div id="solution1div" style="display:none;">Solution 1</div>
<div id="solution2div" style="display:none;">Solution 2</div>
<div id="solution3div" style="display:none;">Solution 3</div>
<div id="solution4div" style="display:none;">Solution 4</div>
</div>
jquery:
$("a").live("click", function(){
var idV = $(this).attr("id");
$("#"+idV+"div").siblings().hide();
$("#"+idV+"div").show();
return false;
});
mmmm the error is actually there man..
see:
$("#"+idV+".div").css("display","block");
change it to:
$("div#"+idV).css("display","block");
You're reusing ID attributes. IDs need to be unique to a document.
You can't have anchors and divs with the same ID.