Develop Reference

How to hide parent div based on child name?

I have a page with numerous divs. The main div contains 3 sub divs. I put a search box and i want to show the main div based on what i type and hide the others.
I looked on the internet and so far i managed to do this: https://jsfiddle.net/qaho8hjt/6/
$('.my-textbox').keyup(function() {
var value = $(this).val();
var exp = new RegExp('^' + value, 'i');
$('.change_req .orizontala').each(function() {
var isMatch = exp.test($('.projectName', this).text());
$(this).toggle(isMatch);
});
});
The problem is that i don't know how to hide the parent div. I can only hide the div that i search for.
Thank you.
Edit: Thank you all for you're responses.

Code is almost fine, just that you are hiding the div that has the content where you should be hiding its immediate parent, demo
replace
$(this).toggle(isMatch);
with
$(this).parent().toggle(isMatch);

You can use closest() to get the nearest containing div. Try this:
$(this).closest('.change_req').toggle(isMatch);
Updated fiddle

Try like this:
$(this).parent().toggle(isMatch);
See your edited code here.

jQuery generating content from generated content

I am using a database to create divs and then naming them from a field in a database.
Within this div is a "delete" link that I'd like to be able to create a div below the original div with a message such as "are you sure you want to delete this?"
But my issue comes to when the database has to generate more than one of these original divs, meaning that the "delete" link will be used more than once in different places or the different divs.
I am unsure on how to create a Javascript/jQuery script where it would:
1. check what the ID of the parent div is (div#parent -> ul -> li -> a).
2. generate a new div below the parent div (not inside).
3. once an option is selected, remove the generated div.
Heres an example of the layout that I'd like to work with:
link to image
As you can see, the generated jQuery div would be outside of the parent div it also has the id of the parent div with "_delete" added onto the end. The functions are there as an example for naming the functions...
Would this be possible?
EDIT - I have gotten it somewhat working, now the issue is when it creates the extra div it doesn't stop you from making more than one... How can I limit this?
What I have done so far
function action() {
var visable = false;
if(visable==false) {
$("#foo").append('
<div id="action_foo" class="action-warn center">
Are you sure you want to delete "<span>foo</span>"?
Yes / No
</div>
')
visable = true;
} else if(visable==true) {}
}

Yes it is possible.
$('#foo_delete').sibling('#parent') will allow you to select "parent".
http://api.jquery.com/siblings/
Try using insertAfter.
http://api.jquery.com/insertafter/
You can remove generated div also with sibling.
Try calling $('#parent').sibling('#foo_delete').remove() on parent's delete anchor.

Try this:
$(document).ready(function(){
$('#foo ul li.right').click(function(){
var _parent = $(this).parent(), // gets immediate parent which is ul
_gparent = _parent.parent(); // gets grandparent which is #foo
$('<div id="foo_delete" class="action-warn center">-Delete Warning Text-</div>').insertAfter(_gparent); // insertAfter(); puts the content right after _gparent.
});
$('#foo_delete a').click(function(){
$('#foo_delete').remove();
});
});

How to toggle dynamically created div 's on the basis of class and name attributes?

I am creating Table of Content dynamically.
Hierarchy levels:
Parent Div
Children Div
Grand Children Div
For this I am creating div 's dynamically.
Then I am assigning margin to those divs.
Parent Div :- No margin
Children Div :- margin-left :15px;
Grand Children Div :- margin-left :35px;
So I am able to create table of content dynamically.
Problem :
I created more than one parent divs and there sub divs as per hierarchy.
But If I am applying click event on first parent div then that event also getting apply on other parent div why because I am adding click event on class.
In this click I am facing problem in slideToggle().
As I am using class so because of this it is getting applied on other also.
Example:
$('main_div').haml(['%div.g', {id:'g_' + i', name: i}, Parent Div]);//class = 'g'
$('main_div').haml(['%div.g1', {id:'g_' + i, name: i, style:'**margin-left: 15px**;'}, Children Div]);//class = 'g1'
$('main_div').haml(['%div.g2', {id:'g_' + i, name: i, style:'**margin-left: 35px**;'}, Grand Children Div]);//class = 'g2'
In this div 'i' value is coming from database on with the help of AJAX GET.
So what changes should I do for slideToggle() : In this I just want to toggle only clicked parent div's childrens only?
Any hints / suggestions please?
Reference code:
$('#main_div').on('click','.g', function(){
$('#main_div').find('.g1,.g2').slideToggle();
});

If I understand right, slideToggle() is click event for all parents div? Than in function you can use 'this' variable.
$(this).find(...some selector for child divs...').slide..
Show, please, code for click event?

Try this:
$('#main_div').on('click','.g', function(){
$(this).find('.g1,.g2').slideToggle();
});
When jQuery calls your click handler it sets this to the clicked item, i.e., to the .g element, so only apply .find() to that item's descendants by using $(this).find(...

Following Reference Link solved my problem.
On click slidetoggle div but hide others first - jQuery
Thanks to other people also.

detect the class of a child div inside a parent div and then add class or id to the parent div

OK, I know how to add class as well as detect the class of the div in jQuery but now I want to get the class name of the child inside the parent div and then add a class or id to the parent div that hold the child div.
example:
<div>
<div class="childdiv">this is the child divident</div>
</div>
after the div child class has been get or detected then add class or id to the parent div (in my case, I use class)..
the output should be:
<div class='parentclasshasbeenadded'>
<div class="childdiv">this is the childdiv</div>
</div>
This just an experiment, once this succeed then I'm going to apply this to my actual big bang project, please help me, thanks in advance.
PS: I'm open to any suggestions, recommendations and ideas.

You could also do
$('div :has(".childdiv")').addClass('parentclasshasbeenadded');

$('.childdiv').parent().addClass('parentclasshasbeenadded');
Above will add class=parentclasshasbeenadded to parent of .childdiv
and to add id:
$('.childdiv').parent().attr('id', 'someid');
To detect class exists you need to use hasClass()
$('div').children().each(function() {
if($(this).hasClass('childdiv')) {
// to add class
$(this).parent().addClass('parentclasshasbeenadded');
// to add id
$(this).parent().attr('id', 'someid');
}
});

if($(this).children().hasClass("childdiv")) {
$(this).addClass("Thaparentclasshasbeenadded")
}

this might help to figure things out.
$('.parent .child')[0]{
//there is
}

jquery .each() loop

i want to read all links in ".vm-video-title"-divs and post them each in the same div. So i made this script:
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("div.vm-video-title>a").text());//add to div the link
});
but i have the problem that it reads ALL the links of all divs and put them in one div.
example:
<div class="vm-video-title">Text1</div>
<div class="vm-video-title">Text2</div>
<div class="vm-video-title">Text3</div>
output:
Text1Text1Text2Text3
Text2Text1Text2Text3
Text3Text1Text2Text3
wanted output:
Text1Text1
Text2Text2
Text3Text3

You can select the <a> elements directly, and use the after()[docs] method to append the content of each after each one respectively.
$("div.vm-video-title > a").after(function() { return $(this).text(); });
This doesn't do a "destroy then recreate" of the existing elements like the html()[docs] method will.
Working example: http://jsfiddle.net/CCr9C/

This should do the job for you,
you need to find the div inside current element in the loop (el).
$('.vm-video-title').each(function(i, el) {
el = $(el);
el.html(el.html()+el.find("a").text());
});
in your code you are adding text() of all matching "a" tags in your divs (i.e. Text1Text2Text3)

You were almost there. Instead of : $("div.vm-video-title").text(), which gives you text inside any div with class vm-video-title, you need to find a tag inside current div and get text from it. We pass this as context for selecting a inside current div jQuery( selector, [context] )
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("a", this).text());
});