Well I'm trying to write a validation jQuery plugin, but for that I need to find all inputs inside of a container, which is marked with an attribute. However, that container may have other sub-containers, also marked with attributes, and they may have their own inputs.
I need to select all inputs, descendants of the parent container (accessed by $(this)) which are not descendants of the sub-containers. Is that possible?
Some code to illustrate:
<div data-container>
<input>
<div class="form-group">
<input>
</div>
<input>
<div data-container>
<input>
<input>
<input>
</div>
</div>
I want to select those first three inputs, and ignore the ones inside the children data-container. The one inside the form-group must be selected too.
Use .not() to exclude a selection from an existing jQuery selection:
var yourSelection = $(this).find('input').not($(this).find('[data-container] input'));
JSFiddle (I replaced the $(this) by $('[data-container]:first') in the fiddle for simplicity)
This should work, here http://jsfiddle.net/2Wv7P/
$('div[data-container] input:lt(3)')
You can select based on the parent div like this. Only the first level children are going to be selected based on you given tag, assuming you ID the parent div as #parent
$('#parent > input')
So following this path, if you have to select the parent with $(this), which is to say using 'this', then you can select this same set of 'input's using
$('#' + this.id + ' > input')
For example
see this fiddle
Related
<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.
Hi there I am encountering the following problem I have 3 div's dynamically loaded by ajax like so:
<div class="item" id="item1"> // Dynamically loaded
<input>
<input>
</div>
<div class="item" id="item2"> // Dynamically loaded
<input>
<input>
</div>
<div class="item" id="item3"> // Dynamically loaded
<input>
<input>
</div>
$(document).on('change', '.item', function() {
});
What I want to achieve is when I make a change on the input of one of the three div's, I wanna know where the input was provided. Because the elements are dynamically loaded I can't use a direct selector but I have to use $(document).on and because I dont make use of the direct selector I can't make use of (this). How do I find out in what item changes have been made?
Thanks in advance!
The first argument of the handler - for instance e - would receive the event if it is declared. Then the e argument is having target property which gives you the HTML element on which the event originated. So this would give you a reference to the changed input:
$(document).on('change', '.item', function(e) {
var targetInput = e.target;
var parent = $(targetInput).closest("div.item");
// Do something ...
});
According to your HTML, each div is having different id, Hence you can get the div Id on change of the input. Please test this piece of code and test.
$("input").on('keyup', function(){
//Get the parent div id,
var changeDivID = $(this).parents('div').attr("id");
alert(changeDivID);
});
I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?
You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.
You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()
I'm trying to implement the jQuery toggle item in my Rails 3.2.1 app.
I would like the toggle to work for each individual <li> item on the <ul>, so I can target which element to hide/show individually. But for some reason, only the top element has the toggle effect; the rest are not responding.
Here's the jsFiddle.
Can anyone explain why this is happening?
It’s because your divs all have the same id, which is invalid HTML. Since the DOM is only expecting there to be one element with any given ID, then when you write $("#trigger"), it only selects the first one it finds. Change the ID to a class.
<div class="trigger"> ...
And change your ID selector to a class selector.
$('.trigger').click(/* ... */);
jsFiddle
ID attributes must be unique on the page. Change all the id="trigger" to class="trigger" then try:
$(".trigger").click(function (){
$(this).find('.menu-item').toggle();
});
JSFIDDLE
$(".trigger").click('.menu-item', function () {
$(".menu-item", this).toggle();
});
Multiple elements with the same id is invalid HTML, and jQuery will only target the first that it finds with that id.
I updated your fiddle to use a class instead of ids
<div id="trigger" class="trigger">
Then:
$(".trigger").click(function (){
$(".menu-item", this).toggle();
});
to target the class and not the id.
Why do the elements have the same ids? An ID should be unique. If you want to select all the <li>s, use a CSS selector like $(".toggle-li").
I need to select a textarea with jQuery and my selector code isn't working.
This is what I have:
HTML:
<div id="textareaContainer">
<textarea>
this is text
</textarea>
</div>
JS (onload):
jQuery("#textareaContainer > input[type=textarea]").val("");
JSFiddle: http://jsfiddle.net/EVvfT/
When the page is loaded, the textarea's value is not overwritten. Unfortunately I cannot set the id or class of the textarea, which is why I need to select it as the child of the div it's in.
How do I get this to work?
It's simply textarea:
jQuery("#textareaContainer > textarea").val("");
jsFiddle here.
If there's more than one <textarea>, you could use first() to get the first, last() to get the last or eq() to select any others in between.
To only grab the first one:
jQuery("#textareaContainer > textarea:first").val("");
You can select it like:
$('textarea > #parentId').val()
Alternatively:
$('textarea > div[class="something"]').val()
If you got the textarea and want to test to see if the parent is what you want it to be you can do:
var $textarea = $('#textarea'),
$parent = $textarea.parent(),
isGoodParent = $parent.is('#textareaContainer');
// isGoodParent is true if the textarea's parent matches the selector `#textareaContainer`