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.
Related
I have a dropdown menu I'm working on. I've added a hidden icon on each item. Then once the menu generates, I want to go through and find which items have sub-menus and remove the hidden class for those items.
I can't seem to be able to get this code working.
var tags = $("li > ul.sub-menu").each(function(){
$(this).parent("li").closest('i.hidden').removeClass("hidden")
})
This is the html/css
http://pastebin.com/FzTFeYMq
I'm using IE8 so right now I can't get a proper fiddle up.
If I'm understanding correctly, what you're trying to do is unhide the carets for any menu/submenu that has children. The following should accomplish what you're looking for:
var tags = $(".sub-menu").each(function(){
$(this).closest('li').find('a > span > i:first').removeClass("hidden")
})
I tossed up a quick CodePen demonstrating this here: http://codepen.io/P1xt/pen/eZMLrq
In your loop you have to find the first element with a statement like this:
$(this).find('i.hidden:first')
I have a div block that is repeated on the page for each product. I am using JS to cycle through all the instances of a div class and would like to move that div to another div in the same block. I wrote this:
$(value).appendTo('.product-image')
and it adds each div to all the product-image divs on the page. How can I add each div only to the product-image div that is a child of $(values) parent?
This did not work for me:
$(value).appendTo($(value).parent().find('.product-image'))
Try this to select the first parent div.
$(value).appendTo($(value).parent('div:first()').find('.product-image'))
I think this will give you some ideas for implementation:
For example if you value element has value class:
$('.value:has(.product-image)').find('.product-image').each(function(){
$(this).append(your_new_div)
});
i came up with this sulotion thanks !
ind++
var tryy = "try"+ind;
$(value).parent().find('.product-image').addClass(tryy);
var tryyy = '.'+tryy;
$(value).appendTo(tryyy);
I have requirement where I wanted to find the amount fields like $412,341.40 from document.
I tried $("div:contains($)").css("background-color","yellow") but it returning parent div's also, and i just wanted color the child ones.
for e.g see the below image, the above jquery coloring both div's parent and child.
How can i color child div only? I am trying find all div's which contains string like $123,55.60.
Any help is greatly appreciated.
This will give your the direct parent.
$('div>:contains("$")').last().css("background-color","yellow")
JSFIDDLE DEMO
EDIT: The above will work great for only one occurrence of $. For multiple occurrences of text, use below code. This makes use .each() and looks for a closing </div> tag each time.
var divs = $('div>:contains("$")');
divs.each(function() {
var htmlinner = $(this).html();
if(htmlinner.indexOf('</div>') == -1) {
$(this).css("background-color", "yellow");
}
});
JSFIDDLE DEMO[2] for multiple occurrences
use:
$("div:contains('$')").find('div').css("background-color","yellow")
I was wanting to have a javascript (jQuery) function that removed everything that didn't have the safe class.
The problem is, if the parent element is hidden, it cannot show the 'safe' part of it.
Is there a simple way to get around this? I'd rather not go in and span all of the elements that need removed.
trimmer = function(element){
x = $(element+' *:not(.safe)');
x.hide();
}
trimmer('section');
Fiddle
var element = 'section';
//finds all non `.safe` elements in `section`s and hides them
$(':not(.safe)', element).hide();
//finds all `.safe` elements in `section`s and shows the `section`s
$('.safe', element).parents(element).show();
Horen was right, it is indeed impossible to show parts of a hidden element.
To make only parts of the text disappear, the non-safe content must be labeled for removal.
$(element).contents().each(function() {
if (this.nodeType == 3)
$(this).wrap('<span class="disappear" />');
});
You can read more about this answer here:
How to add spans to all areas of a node that isn't restricted
I am trying to get the two randomly generated div ID's shown below and wrap them within my custom div that I can control. Was searching around on jQuery API for solution but still no ideas.
Here's a preview of example:
Okay so as you can see, there are two <div id="random_string"></div> and one custom <div class="wrap_awm"></div>
Since I can't target the two ID's from above I have no clues how to tell jQuery, get the two div's from above wrap_awm and put them inside of the ".wrap_awm". Simple as that?
What you're looking for is called .prevAll():
var $wrap = $('.wrap_awm');
$wrap.prevAll(':lt(2)').appendTo($wrap);
It's combined with the :lt() selector to only use the first two elements.
It's this simple:
var w = $(".wrap_awm");
w
.prev()
.prev()
.addBack()
.appendTo(w);
See a live working example at JS Fiddle
$(".wrap_awm")
.prev("div")
.appendTo(".wrap_awm")
.end()
.prev("div")
.appendTo(".wrap_awm");
You can use the .prev() function in the jquery API to select the previous sibling of your custom div. You can then store that and apply the same .prev() function on it i.e:
var previousSibling1 = $(".wrap_awm").prev();
var previousSibling2 = $(previousSibling1).prev();
You now have a reference to your two previous siblings and they can be moved to your custom div.
This is simple and readable, but probably not how it should be done...
$(document).ready(function () {
var prev1 = $('.wrap_awm').prev().prev();
var prev2 = $('.wrap_awm').prev();
$('.wrap_awm').html(prev1).append(prev2);
});
JSFiddle