We Keep Coding

Target parent div, but not if it includes a nest class

I want to target a parent div using document.querySelectorAll. But not if the div contains a nested div, with a particular class.
For example, in the example below, I want to grab the parent first and last floatContainer divs. But not this second, because it contains dropdown-container class.
document.querySelectorAll(".ej-form-field:not([dropdown-container])") does not seem to be working.
console.log(document.querySelectorAll(".ej-form-field:not([dropdown-container])"))
<!-- GRAB THIS -->
<div id="floatContainer" class="ej-form-field">
<label for="floatField">First name</label>
<div class="input-container">
<input id="floatField" class="ej-form-field-input-textbox" type="text">
</div>
</div>
<!-- NOT THIS -->
<div id="floatContainer" class="ej-form-field">
<label for="floatField">Last name</label>
<div class="dropdown-container input-container">
<input id="floatField" class="ej-form-field-input-textbox" type="text">
</div>
</div>
<!-- GRAB THIS -->
<div id="floatContainer" class="ej-form-field">
<label for="floatField">Telephone</label>
<div class="input-container">
<input id="floatField" class="ej-form-field-input-textbox" type="text">
</div>
</div>

this code solve your problem.
console.log(document.querySelectorAll(".ej-form-field>div:not(.dropdown-container)"))

you must target a specific class not an attribute, ie:
document.querySelectorAll(".ej-form-field:not(.dropdown-container))

I also found this option, which seemed to work as well:
document.querySelectorAll("div.ej-form-field + :not(.dropdown-container)")

Can I set ng-model to two values?

I have an input
<input type="text" ng-model="choice.text">
Where choice.text creates a new text property in the object choice. This allows me to send the contents of the input to different page. While this feature works, I would also like to add another feature where the content of the input is displayed and updated in real time on the page. Something to this effect.
Unfortunately, ng-model is already set to choice.text. Is there a way I can have set two values to one ng-model? It would perhaps look like this:
<input type="text" ng-model="choice.text name"></p>
<p ng-bind="name"></p>
If not, is there another way to achieve this effect?
EDIT: For those wondering, when I try <p ng-bind="choice.text"></p>it doesnt work for some reason.
EDIT 2: I simplified the code for the sake of the question. Here is the actual code for more detail:
<div class ="ask-container">
<div ng-switch="cbstate">
<div ng-switch-when="not-pressed">
<h1>Choose between... </h1> <!-- I would like to add the dynamic element here -->
</div>
<div ng-switch-when="pressed">
<h1>Hi</h1>
</div>
</div>
<form role="form" ng-submit="submitChoice()">
<div class="input" ng-repeat="choice in poll.options">
<input type="text" ng-model="choice.text" placeholder="Choice {{$index+1}}"><br>
</div>
<button class="add" type="button" ng-click="addChoice()">+</button>
<button class="create" type="submit">Create</button>
</form>
</div>
EDIT 3: Same code, but with the ng-bind:
<div class ="ask-container">
<div ng-switch="cbstate">
<div ng-switch-when="not-pressed">
<h1>Choose between... </h1>
</div>
<div ng-switch-when="pressed">
<h1>Hi</h1>
</div>
</div>
<form role="form" ng-submit="submitChoice()">
<div class="input" ng-repeat="choice in poll.options">
<input type="text" ng-model="choice.text" ng-change="temp=choice.text" placeholder="Choice {{$index+1}}"><br>
</div>
<button class="add" type="button" ng-click="addChoice()">+</button>
<button class="create" type="submit">Create</button>
</form>
<p ng-bind="temp"></p>
<p ng-bind="choice.text"></p>
</div>
Note: Somebody said that the ng-repeat may be messing with my scope. Maybe keep that in mind as you try and fix my problem.

For now, just list[0]. Eventually I will want them all to appear in a list but I can do that myself. For now I just want the first input to display in the bind.
To have the first of the list appear in the bind:
<div class="input" ng-repeat="choice in poll.options">
<input type="text" ng-model="choice.text" placeholder="Choice {{$index+1}}" />
<br>
</div>
<p ng-bind="poll.options[0].text"></p>
Each <div> in the ng-repeat has its own child scope with the choice property set to poll.options[0], poll.options[1], poll.options[2], etc. Simply use those values in the parent scope.

Is this not acceptable?
<input type="text" ng-model="choice.text"></p>
<p ng-bind="choice.text"></p>

Use ng-change to update other model
<input type="text"
ng-model="choice.text"
ng-change="temp=choice.text"/>
Now for testing, use:
<p ng-bind="temp"></p>
<p ng-bind="choice.text"></p>

Wrap children elements of parent elements without class only if they contain text inputs

Consider the following HTML
I am trying to wrap the child elements (label/input) where the label text says 'This one'. Basically, I need to select the full elements without class partial if they contain input text elements and not number uinput elements. One the full elements are selected, their children elements need to be completely wrapped entirely with <div class="wrapped"></div>
<div class="group">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
<input type="number"/>
</div>
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="number"/>
</div>
</div>
Like this:
<div class="wrapped">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
</div>

You could use a combination of the :not()/:has() selectors to select the desired .full elements. Iterate over the selected elements, and wrap the children elements using a combination of the methods .children()/.wrapAll():
Example Here
$('.group .full:not(.partial):has(input[type="text"])').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
Alternatively, you could also use the following:
Example Here
$('.group input[type="text"]').closest('.full:not(.partial)').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
I'm not sure where approach is faster.. probably the first one.

Copy element with its properties in mootools

The Following is the code I am using in Mootools,
var company_name = $('company_name-wrapper').clone();
company_name.inject($('wmd-button-bar'));
The HTML is as follows,
<div id="company_name-wrapper" class="form-wrapper" style='float:left;'>
<div id="company_name-label" class="form-label">
<label for="company_name" class="required">
Company
</label>
</div>
<div id="company_name-element" class="form-element">
<input type="text" name="company_name[]" id="company_name" value="">
</div>
</div>
..............
..............
<div id='wmd-button-bar'></div>
The Output I am getting after executing the code is,
<div id='wmd-button-bar'>
<div class="form-wrapper">
<div class="form-label">
<label for="company_name" class="required">
Company
</label>
</div>
<div class="form-element">
<input type="text" name="company_name[]" id="company_name" value="">
</div>
</div>
</div>
The Id's or the style of any elements is not getting cloned.
Any help or suggestion is appreciated,
thanks in advance.

Mootools avoids copying ID's to avoid getting double ID's, but you can override that using .clone([contents, keepid]) keepid function paramenters.
So try using: var company_name = $('company_name-wrapper').clone(true, true);
Demo
Notice that doing so you will have duplicate ID's and that is invalid HTML, it will give you problems when you try to refer to different elements with the same ID.

How can I select the next div using jQuery?

I am quite a noob when it comes to jQuery and I'm trying to select the next element using the next() selector but having a little trouble in getting it to work!
What I'm trying to do is to activate slideDown() once the user has finished making their selection on a ui slider. Here is my code:
$('.slider').slider({
stop: function(event, ui) {
$(this).nextAll('.secondq:first').slideDown('slow')
}
});
Trouble is, this doesn't work at all. It will only work if I put the 'secondq' question inside the parent div of the ui slider. Here is my HTML:
<div class="option">
<h2 align="left">How high is your ceiling from the floor?</h2>
<input type="text" align="right" name="bonus" class="value" disabled="disabled" />
<div class="slidewrap">
<div class="sliderFt slider"></div>
</div>
</div>
<!-- End Option -->
<div class="option">
<h2 align="left">How many windows do you have?</h2>
<input type="text" align="right" name="bonus" class="value" disabled="disabled" />
<div class="slidewrap">
<div class="sliderWinDoor slider"></div>
</div>
<div class="secondq" style="display:none;">
<h2>What type of material are your windows made of?</h2>
<div class="radiocont">
<label>Wood</label>
<input type="radio" class="styled" value="wood" name="windowtype" />
</div>
<div class="radiocont">
<label>Metal</label>
<input type="radio" class="styled" value="metal" name="windowtype" />
</div>
<div class="radiocont">
<label>PVC</label>
<input type="radio" class="styled" value="pvc" name="windowtype" />
</div>
</div>
</div>

nextAll only gets siblings. Based on your HTML structure, you could do:
$(this).parent().next()
To make it more independent from the structure, you could also do:
$(this).closest('.slidewrap').nextAll('.secondq:first')