FAQ Database Discussion Community


jQuery/Javascript get classes of multiple elements to show an element with this class

javascript,jquery,class,if-statement,jquery-selectors
I'm struggling with a jQuery live search. First of all the live search update with the following code works. //live search function function live_search(list) { $("#search") .change( function () { //getting search value var searchtext = $(this).val(); if(searchtext) { //finding If content matches with searck keyword $matches = $(list).find('a:Contains(' +...

Select an element inside an element

javascript,jquery,jquery-selectors
Here is my DOM: <div class="a"> <div class="b">b</div> <div class="c">c</div> </div> JS: $('div.a').on('click',function(){ // ....add a div append to div.a }); $('div.b').on('click',function(){ //....edit the content of element }); Clicking div.a will add another div (d,e,f,etc.) inside div.a. Clicking div.b, div.c or other div inside will edit the content of div.b....

How can multiple variables be used to create multiple jquery selectors?

javascript,jquery,variables,jquery-selectors,addclass
When I convert multiple variables into multiple selectors the below code fails to execute. DEMO HERE $('.Btn').on('click', function () { var outer = $(this).data('test'); var inner = $(outer).children('.Inner'); $(outer + ',' + inner).addClass('Success'); }); In the code above: This is successful $(outer).addClass('Success'); This is successful $(inner).addClass('Success'); This is not $(outer...

How to extend a jQuery selector that is stored in a variable?

jquery,performance,jquery-selectors
I have a jQuery selector stored in a variable, like so: var myVariable = $( ".js-selector" ); I'm wondering if and how I can use this variable to select children of this element, instead of writing: $( ".js-selector .some-child" ); How do I do this? I'm also wondering if I...

jQuery selector next child of nested elements

javascript,jquery,html,twitter-bootstrap,jquery-selectors
How to select the next input within nested elements? For example: when currently selecting 1a, pressing the down arrow key should select 2x, and down again should select 3x, and so on until 6x. In the other case, if currently selecting 1a, press the right arrow key should select 1b....

Find descendant elements that do not have a specific ancestor

jquery,jquery-selectors
I want to be able to select an element and find all descendant elements with a specific class but are not contained with a similar parent element. It's hard to describe: Html: <div class="js-test js-1"> <div class="b">1</div> <div class="b">1</div> <div class="d"> <div class="b">1</div> </div> <div class="js-test js-2"> <div class="b">2</div> <div...

How do you select in-line text with Jquery?

javascript,jquery,jquery-selectors
How can I select the text infront of the unordered list below? <li class="foo"> How can I remove this text? <ul class="bar"> <li><a href="#">Link</a></li> </ul> </li> I tried doing something like this: $('ul.bar').previousSibling().remove(); But I think that would only work with another element, and I'm not entirely sure how to...

Finding the name of method in jquery

jquery,jquery-selectors
I am trying to find the method names in my html code. So I will find the method name in 'onclick' attribute and then make operations. This is current code: <div class="button" style="width: 60px; float: right;" onclick="closeModalDialog('dialogAttachmentModal');">BLABLA</div> I want to write jquery like this: $('closeModalDialog').attr('id','btnCloseModal'); And I want to show...

JQuery how to select parent but not children

jquery,jquery-selectors
Sorry for what is probably an easy question, but I haven't found a way to make this work yet. I'm new to JQuery and I've got some nested lists which I'm trying to add a click event to a parent list which will slideToggle the children lists, which I've got...

How do I get the value in this neighboring element?

jquery,jquery-selectors
I'm having trouble with the jQuery part: HTML <div> xxxxxxxxx <div> <ul> <li><button class="addnum">xxxx</button></li> </ul> </div> </div> <div class="num"> 12345 </div> Script $(".addnum").click(function() { var pur = $(this).siblings(".num").clone(); }); I'm trying to clone the value inside ".num", which is 12345. How should I select it? *edit: sorry, I didn't mention...

jQuery selector based on not having class inside

javascript,jquery,jquery-selectors
I need to select an element based on what is not inside it's element. <div class="person"> <div class="name">Jason</div> </div> <div class="person"> </div> What do I need to do to select the second div with the person class. I know there are has and not properties, do I need to combine...

jQuery selector precedence when using pattern matching

javascript,jquery,javascript-events,jquery-selectors,event-handling
I am creating a form that implements a bunch of similar elements. They are custom select boxes, created out of <ul>s. Some of these elements are slightly different in the way I want the mousedown event to be handled though. The way I have it set up currently is that,...

How to change the color of first option in select using jQuery

jquery,jquery-selectors
I am having the following Html <select> <option value>--Select--</option> <option value="60">Salaried Employee</option> <option value="61">Trainee</option> <option value="62">Skilled Worker</option> </select> Now here the my requirement is to display the first option in a blue color and the rest in black color. The first option should be blue in color either selected or...

Embedding a function inside .delay() doesn't work porperly

jquery,html,html5,css3,jquery-selectors
So I have HTML with a table and each column has button which should fade out that table and then fade in another DIV which contains info regarding about that specific column I clicked on. so the Jquery looks like this: $(document).ready(function(){ $('#motoBttn').bind('click', function(){ $('#ServicesContent').fadeOut(); $('#infoSlector').fadeIn(); $('#motoDescContent').fadeIn(); $('#goBackDiv').fadeIn() ; })...

Using a jQuery Selector With a Variable

javascript,jquery,variables,jquery-selectors
Is there any way to make something like the following code? var input = ("$(\"#div .input[id='" + id + "']\")"); input.fadeIn(); Or maybe I could use something like the following? var input = ("\"#div .input[id='" + id + "']\""); $(input).fadeIn(); PS: Take my apologies as this question was cloned but...

jQuery: How to combine two lines of code (with same target)

jquery,jquery-selectors
I am new to jQuery and am trying to combine the following two lines of code as they both target the same div ( $(this).closest('div.col-9').nextAll('div.hiddenDiv') ) and I have other, similar scenarios where this would reduce code as well: $(this).closest('div.col-9').nextAll('div.hiddenDiv').find('input, select, textarea').removeProp('checked').removeProp('selected').not(':button, :checkbox, :hidden, :radio, :reset, :submit').val(''); $(this).closest('div.col-9').nextAll('div.hiddenDiv').hide(); It works...

Find all input with specific keyword [duplicate]

jquery,jquery-selectors
This question already has an answer here: jQuery selector for a checkbox that contains certain text in its name attribute 3 answers I'd like to find all the inputs that have at the end of their names the keyword [0]. I guess I have to use the following method:...

Jquery onchange event not triggering

javascript,jquery,html,struts2,jquery-selectors
I am stuck in a situation where I have a Struts2 form with a select tag which when changed should trigger an event and I can't figure out why the onchange function is not triggering but the peculiar thing is that the onchange trigger event works in an other example....

jQuery button to show/hide multiple divs with same id

jquery,jquery-selectors,click,element,slidetoggle
I have many products being populated dynamically, all with same id and class names. I want each "Buy Now" button to have its own div that toggles with click of button. I do have the ability to assign an incrementing number index to the ids and classes, however, if there's...

Click handler for element with highest z-index only

javascript,jquery,html,css,jquery-selectors
In a page I'm creating there are some WebGrid components serving as master grids, and on clicking a row, a details area is shown. Now every row shall also have a delete button, so that clicking this button, the row is deleted. Now because I have a click handler for...

Get the next div and check that div for a class exists in it's childs

jquery,html,jquery-selectors
How do I determinate if one of the buttons have the class "selected"? <a id="foo">Foo</a> <div id="div"> <input type="button" /> <input type="button" class="selected" /> <input type="button" /> </div> I wrap foo into a jQuery object. Call next() to get to the div. How do I do the rest? function fooClickHandler(foo)...

jQuery append using nth-child instead of first

jquery,jquery-selectors
I'm editing a script that was originally like $('.navigation-area:first').append('<li>New Item</li>'); However the application has since changed and this item needs to be appended to the second .navigation-area. I've tried: $('.navigation-area:nth-child(1)').append('<li>New Item</li>'); but that didnt work. Are there any other suggestions to how to do this? I would've assumed the above...

Union between two jquery selectors

jquery,jquery-selectors,selector
This is my case: var elems = form.find(':input'); var clEditors = form.find('.cleditor').parent(); elems.css('border', '2px'); clEditors.css('border', '2px'); Is there anyway I could prevent the duplication and do something like this: var elems = form.find(':input').union(form.find('.cleditor').parent()); elems.css('border', '2px'); I tried using a multi selector with the :parent selector and it didn't work: var...

jquery selector: child elements of the same class inside divs of different classes

jquery,html,css,jquery-selectors
There are two divs with classes ".div1" and ".div2". Each of them contains the same code - the same elements with the same class names. If I need to set/get a value of an element inside one of the divs, how do I refer to those elements? I try the...

How is this selector working?

javascript,jquery,jquery-selectors
In the HTML I have the following element: HTML <input id="userNameTxt" type="text" class="input" value='ABC> And i am selecting it like this in jQuery: APP.js $(userNameTxt).val() What is this selector selecting? (Like when I use $('.something') -> it's selecting the Class of the element or $('#something') it's selecting the ID.) It...

How do I get the dom element which has not rendered with javascript?

javascript,jquery,dom,jquery-selectors
I have a simple js code: <html> <head> <title>test</title> <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> console.log(document.querySelector('#nav-toggle')); // this will get null console.log($('#nav-toggle')); // this will get the element </script> </head> <body> <a id="nav-toggle" href="#">link</a> <script type="text/javascript"> console.log(document.querySelector('#nav-toggle')); // this will get the...

jQuery selector