I have a DOM structure similar to this:
<div id="ans1">
<input id="in1" />
<input id="in2" />
</div>
<div id="ans2">
<input id="in1" />
<input id="in2" />
</div>
How can I select some of the descendants of an ancestor?
Something like:
$("#ans1 #in1, #ans1 #in2")
If you replace your 'id's with classes (since ids should be unique), then,
<div id="ans1">
<input class="in1" />
<input class="in2" />
</div>
<div id="ans2">
<input class="in1" />
<input class="in2" />
</div>
Then, to select all the descendants of id=ans1 having class="in1", you go like,
$('#ans1 .in1')
This will return an array of all the .in1 class elements inside id=ans1 element
You can use the children function
$("#ans1").children("#in1, #in2")
You should use unique ids thought the DOM, use classes to specify elements that are the same in nature.
change your children to have same class of in1
$("#ans1 > .in1")
Will select all direct descendants of ans1 with class of in1.
Related
I want to get the specific input element on clicking on the click button. And there might be more input element with this class "quan" in the future. So, I want to get the specific input element with class "quan" on clicking the click button which associate with it. The way I did in the js file only give me the first element of that class name. How do I get the specific element? Thanks for your help.
HTML
<div>
<div>
<button onclick="click(event)>Click<button>
</div>
<div>
<input class="quan" type="number" min="0" value="2"/>
</div>
</div>
Javascript
function click(event){
console.log(document.querySelector(".quan"));
}
Use a selector finding the common ancestor (using closest) of them and find the correct child.
function my_click(elem) {
// ideally elem.closest(".group-name")
// but this will also do
var parent = elem.parentNode.parentNode
var child = parent.querySelector(".quan")
console.log(child.value);
}
<div>
<div>
<button onclick="my_click(this)">Click</button>
</div>
<div>
<input class="quan" type="number" min="0" value="1" />
</div>
</div>
<div>
<div>
<button onclick="my_click(this)">Click</button>
</div>
<div>
<input class="quan" type="number" min="0" value="2" />
</div>
</div>
How would I go about using wrap() to wrap multiple elements (with different classes) inside a <div>?
For example, on the form I'm working on there is a big list of checkbox inputs and labels in the form of:
<input>
<label>
<input>
<label>
etc
I'm wanting to wrap a <div> around the input and label, so the result would be:
<div>
<input>
<label>
</div>
<div>
<input>
<label>
</div>
Thanks!
You can use the .wrapAll() method.
$('form > input').each(function(){
$(this).next('label').andSelf().wrapAll('<div class="test"/>');
});
If your markup has always the exact same order, I'd prefer to use:
var $set = $('form').children();
for(var i=0, len = $set.length; i < len; i+=2){
$set.slice(i, i+2).wrapAll('<div class="test"/>');
}
Should be significant faster.
Ref.: .wrapAll(), .andSelf(), .slice()
$('input+label').each(function(){
$(this).prev().andSelf().wrapAll('<div>');
});
If you have something like this:
<input id="input1">
<label id="label1">
<input id="input2">
<label id="label2">
Then you can use jQuery:
jQuery("#input1").next().andSelf().wrapAll('<div id="newDiv" />');
jQuery("#input2").next().andSelf().wrapAll('<div id="newDiv" />');
and get this:
<div id="newDiv">
<input id="input1">
<label id="label1">
</div>
<div id="newDiv">
<input id="input2">
<label id="label2">
</div>
Worked for me :-)
jQuery function wrapAll allows you to wrap multiple elements but if you have a DOM like you wrote then it won't work too well as you can't easily match a part of label and input with a selector. I suggest adding some classes to each part and then using wrapAll.
<input class="i1"/>
<label class="i1"/>
<input class="i2"/>
<label class="i2"/>
$('.i1').wrapAll('<div/>');
$('.i2').wrapAll('<div/>');
This will give you
<div>
<input class="i1"/>
<label class="i1"/>
</div>
<div>
<input class="i2"/>
<label class="i2"/>
<div>
Requirements dictate that I cannot use jQuery and I'm trying to solve the following problem w/out it.
Layout has has identical multiple inputs like this
<div class="item">
<input type="text" />
<input type="file" />
</div>
<div class="item">
<input type="text" />
<input type="file" />
</div>
And the javascript needs to find the sibling file input when a textbox is clicked.
$('input[type=text]').click(function() {
$(this).parent(".item")
.find('input[type=file]')
.trigger('click');
});
Note: I cannot use Ids because there are multiple (many) "items" on the page.
You can use vanila script event handlers and the next sibling relationship between the elements like
//get all the text input elements which are descendants of .item
var els = document.querySelectorAll('.item input[type="text"]');
for (var i = 0; i < els.length; i++) {
//add click handler
els[i].addEventListener('click', function() {
//nextElementSibling is supported from IE9
this.nextElementSibling.click()
//or
//this.parentNode.querySelector('input[type="file"]').click()
})
}
<div class="item">
<input type="text" />
<input type="file" />
</div>
<div class="item">
<input type="text" />
<input type="file" />
</div>
nextElementSibling
http://jsfiddle.net/foaje732/2/
HTML source:
<p id="words">Words
<p>
<label>Q1
<input type="text" id="q1" name="myinput" />
</label>
</p>
</p>
Jscript:
$('#words').append($('<p></p>').html("This is clearly in the wrong place."));
What you actually get:
Words.
This is clearly in the wrong place.
Q1 [input field]
It is because your mark up is wrong, the p element cannot contain another block element, it can contain only inline elements. So the actual html rendered by your markup in the browser will be as below, which makes your output correct.
<p id="words">Words</p>
<p>
<label>Q1
<input type="text" id="q1" name="myinput">
</label>
</p>
<p></p>
So one possible solution you can look for is to use div as the external container like
$('#words').append($('<p></p>').html("This is clearly in the wrong place."));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="words">Words
<div>
<label>Q1
<input type="text" id="q1" name="myinput" />
</label>
</div>
</div>
We cannot get any child <element> inside p element, the $('#words').children() will return 0 so that it append your code at the top of p ( after words -text, not any element).
In this case if you want to fix it, try change p to div:
<div id="words">
<p>Words</p>
<p>
<label>Q1
<input type="text" id="q1" name="myinput" />
</label>
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(document).ready(function(){
$('#words').append($('<p></p>').html("This is clearly in the wrong place."));
})
How to use jquery contains for textbox,I have attached the fiddle link for your code reference,
<div id="txtCon">
<input type="text" name="man-news" />
<input type="text" name="milkman" />
<input type="text" name="letterman2" />
<input type="text" name="newmilk" />
has
</div>
Script:
$('input[name*="new"]').val('has');
$('input:text:contains("has")').css("color","red");
Link:
http://jsfiddle.net/vigneshjayaraman/Ytsr5/2/
:contains only looks at the content of elements. input elements have no content. You have to use .filter() [docs] instead:
$('input[name*="new"]').filter(function() {
return this.value.indexOf('has') > -1;
}).css(...);