How to select an element by ID using jQuery - javascript

I am trying to use the following jQuery code to add a div with class col_box inside the col_left div:
$('#col_left').add('div').addClass('col_box');
My DOM tree looks like this:
<div id="header">Header</div>
<div class="col_container">
<div id="col_left">
<div class="col_box">A</div>
<div class="col_box">B</div>
</div>
</div>
However the jQuery code isn't working. It adds the class col_box to every element on the page.

$('#col_left').add('div') is adding all <div> elements to the original selection. Try using $('#col_left').append('<div class="col_box"></div>') instead (or .prepend).

$('#col_left').add('div') means the same as $('#col_left, div'). i.e. "The element with the id 'col_left' and all div elements.
If you want to select the divs that are children of col_left, just use a child combinator.
$('#col_left > div').addClass('col_box')

.add() adds a selector to the selection, it doesn't create or add elements.
$('#col_left') means *select element id col_left*
.add('div') means add all divs of the page the the selection
So at this point you've selected #col_left and all the divs.
.addClass('col_box') means *add the class col_box to all elements of the selection*.
Here is how to create a div and add it to #col_left:
$('<div></div>').addClass('col_box').appendTo('#col_left');
Or:
$('<div class="col_box"></div>').appendTo('#col_left');

you can use
.append appends after the matched target
$('#col_left').append(
$("<div/>",{class:'col_box'}).html("div added")
);
here is the fiddle http://jsfiddle.net/R65cn/4/

Related

How can I select all the divs inside a section tag using javascript?

I'm making a turn-based game in javascript. I want to move the player from div to div. I have put all those divs in a section and then into an array using queryselectorall. Now my problem is that I also have another divs who I want to use and I can't select them separately. Can anyone tell me how to select only some divs? I have seen something like section>div to differentiate them, but that doesn't work for me.
I have tried replacing div with span on rollDice, zar1, and zar2, but by doing that some CSS breaks.
~
<div class="rollDice">Roll the dice</div>
<div class="zar1">
<img src="poze/dice-5.png" alt="Dice" class="dice" id="dice-1" style="width:150px">
</div>
<div class="zar2">
<img src="poze/dice-5.png" alt="Dice" class="dice2" id="dice-2" style="width:150px">
</div>
<section class="mutari">
<div class="nr1 mutabil"><h1>1</h1></div>
<div class="nr2 mutabil"><h1>2</h1></div>
<div class="nr3 mutabil"><h1>3</h1></div>
</section>
~
I want to select the div only from the section. And after that I want to select the first 3 divs.
What you are looking for is:
document.querySelectorAll('section > div:nth-child(-n+3)')
section (a type selector) finds your <section>. If you had more section elements, you could use section.mutari to be more precise (using a class selector).
> div selects all the <div> tags that are direct children of that section. > is a child combinator.
:nth-child(-n+3), a pseudo-class, restricts this to only select the first three elements, not all of them. It is not needed in your example, as you only have three divs; but if you had more, this would give you only the first three.
With document.body.childNodes
Just replace document.body with your HTML Element.
You can filter after that through the list you get an select all divs.
If you want to get all divs you can also use following:
var dh = document.body.getElementsByTagName('div');
Get all div nodes:
Use document.body.getElementsByTagName('div')
Or
Get filtered div nodes:
Take array from document.body.childNodes.
filter by using for loop and if condition.
Condition Example: use like node[i].nodeName and node[i].id

find div within parent div by parent div class in jquery

I have a situation with two divs, one parent div which has proper classes and another div inside the parent div which doesn't have any class but on a jquery event from the parent div I want to assign a class to the inner div.
This is how the structure looks:
<div class="noUi-handle noUi-handle-lower">
<div class="">
<span></span>
</div>
</div>
Any advice how to get to the inner div and assign a class by calling the parent div with jquery?
Yes, you can use attr-elem selector like
$('.noUi-handle.noUi-handle-lower > div[class=""]').addClass('whatever');
Demo
If you don't want to add class with jQuery and simply want to target those elements than only CSS would suffice as well..
.noUi-handle.noUi-handle-lower > div[class=""] {
/* Targets those div elements which has empty class attribute */
}
Explanation : The selector selects all the div elements with empty class attribute which are direct child to element having both the classes i.e .noUi-handle and .noUi-handle-lower
Try .find. In conjunction with $(this) it will only look for child elements on that event.
function pizzaToppings() {
$(this).find('div').addClass('mushrooms');
}
$('.noUi-handle').on('click', pizzaToppings);
FIDDLE

Moving a div by its class inside another div with an ID

I am trying to move a div with class="SomeDiv" into/inside a div with ID="ParentDiv"
If I edit the javascript to move div with ID into another div with a diff ID that works. But moving a div with Class into div with ID is not working. Am I missing something?
HTML
<div id="ParentDiv">
<div id="ChildDiv">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<!-- move SomeDiv here -->
</div>
<div class="SomeDiv">some content</div>
JS:
document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv'));
http://jsfiddle.net/9gvsa/1/
.getElementsByClassName returns array so you need an index at the end like this:
document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv')[0]);
using jquery makes it easier, look at the updated version of your jsfiddle and you can see the item has been moved, by inspecting the dom tree
$(document).ready(function(){
$("#ParentDiv").append($(".SomeDiv"));
});
example
Use document.getElementsByClassName('SomeDiv')[0] instead,
getElementsByClassName returns a array of elements while getElementsById returns a single element
Source: document.getElementsByClassName
getElementsByClassName returns a HTMLCollection of found elements.
If you know that your div has a unique class you can do
document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv')[0]);
You cannot get an element of a class like that. document.getElementsByClassName returns an array. You would have to do something like...
document.getElementsByClassName('SomeDiv')[0]
Moreover, if you want to put all divs of that className in the div, do some iteration.
for (i=0;i<=document.getElementsByClassName('SomeDiv').length;i++) {
document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv')[i]);
}

Hide a single DIV out of multiple DIV with same id using javascript

I want to hide a DIV in my page but there is no id for the DIV.
There is only class for the div which is common to other DIV too .
Please help me how i can hide only a single DIV based on the 'for' attribute of the label tags
below is the DIV
<div class="field-group aui-field-versionspicker frother-control-renderer">
<label for="versions">Affects Version/s</label>
</div>
<div class="field-group aui-field-versionspicker frother-control-renderer">
<label for="fixVersions">Fix Version/s</label>
</div>
try this
$('.field-group').eq(0).hide(); //hides first div
$('.field-group').eq(1).hide(); //hides second div
here is the fiddle
updated
$('label[for="fixVersions"]').parent().hide(); //hides fixVersions with label selector
updated fiddle
You just cannot use same multiple id for elements, instead you can use same class for multiple elements and you are using same class that is fine:
You can do with these ways:
$('.field-group:eq(1)').hide();
and
$('.field-group').eq(1).hide();
and
$('.field-group:nth-child(2)').hide();
so all of the above script will hide the second div.
Note:
.eq() or :eq() are 0 indexed while :nth-child() is 1 indexed.

Jquery find all except

I have following HTML:
<div id="123" class="test">
<div class="testMessage">Foo</div>
<div><div class="testDate">2010</div></div>
<div id="127" class="test">
<div class="testMessage">Bar</div>
<div><div class="testDate">2011</div></div>
</div>
</div>
And I have following JS/jQuery code:
$(".test").find(".testDate").val("cool 2010");
How to change JS/jQuery to find "testDate" class element except in children "test" class block without using children?
P.S. I know only about class name and I don't know how many divs can be nested.
Update
Its probably the weirdest selector I've ever written:
$("div.test").not(':has(> .test)').siblings().find('.testDate').text('cool 2010');
Demo: http://jsfiddle.net/mrchief/6cbdu/3/
Explanation:
$("div.test") // finds both the test divs
.not(':has(> .test)') // finds the inner test div
.siblings() // get all other divs except the inner test div
Try this and also div elements do not have a value property, use html() method to set the inner html or text()
$("div.test :not(.test)").find(".testDate").html("cool 2010");
If you can modify your main div id to "_123", you can straight away use the id selector like this
$("#_123 > div.testDate").html("cool 2010");
I think the not() selector might help. You can learn more about it here: http://jsperf.com/jquery-css3-not-vs-not
Anytime you try to select $('.test'), it will grab all elements with a class='test'. You need to start at the outermost body tag:
$('body').children('.test').children(':not(.test)').find('.testDate').text('cool 2010');

Categories

Resources