We Keep Coding

selecting all class within this in query

well right now I am doing something like this to find all textbox values which has the same class name.
function generalBottom(anchor) {
var sends = $('input[data-name^="noValues"]').map(function(){
$(this).attr('value',$(this).val());
return $(this).val();
}).get();
}
and i call this function on a onclick of submit button like generalBottom(this)
and I have something like as per my requirement
When I click submit button of User I call a general function passing this as a parameter, but the above code gives me the text values of client as well
["perfect", "hyperjack", "julie", "annoying", "junction", "convulated"], which is undesired, I want only ["annoying", "junction", "convulated"] using my anchor params.
How to do this via my this parameter, I thought to traverse through my tags using children(), parent() but I won't be knowing how many fields user have added as its all dynamic, user can add as many values(text boxes).
I tried this
1) $(anchor).find('.rightAbsNo')
2) $(anchor).find('input[data-name^="noValues"]')
3) $(anchor).find('.rightAbsNo').map(function () {
console.log($(this).find('. showNoButton')); })
None of this worked for me.
My html is somewhat like this, code
<div id="attach0" class="leftbottomno">
<div style="overflow: hidden" class="leftbottomAbsolute" id="">
<form>
<span class="absno"><input type="text" required=""
id="absdelete" data-inputclass="leftbottomAbsoluteNo_class"
value="" class="leftbottomabsolutenotest keys" data-value=""
style="margin-bottom:4px; color: #1c1c1c;"> </span>
<a onclick="addAbsoluteValues(this);" style="margin-left: 50px">
<i class="fa fa-plus-circle color-blue-grey-lighter"></i> </a>
</form>
<a onclick="deleteAbsoluteEmpty(this);> </a><br>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue">
<input type="text" id="nonattach" placeholder="values"
data-name="noValues" data-inputclass="absYes_class" value="annoying"
class="showNoButton showActivity value" data-value="">
<button type="button" onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue" id=""> <input type="text"
data-name="noValues" data-inputclass="absYes_class" subattribute=""
value="" class="showNoButton showActivity value" data-value="">
<button type="button" onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue" id="">
<input type="text" data-name="noValues"
data-inputclass="absYes_class" placeholder="values" subattribute=""
value="junction" class="showNoButton showActivity value"
data-value="" >
<button type="button" style="display: none;"
onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i>
</button>
</div>
</div>
</div>
</div>

First of all, you need to define a container to the groups with something like :
<div class="container">input groups</div>
<div class="container">input groups</div>
and change <button type='submit'> to <button type='button'> to prevent submitting the form.
Then change your function to this:
function generalBottom(anchor) {
var all_inputs = $(anchor).parent(".container").find("input");
var input = $(anchor).siblings('input').first();
all_inputs.each(function(){
$(this).val(input.val());
});
}

Here's Jsfiddle
first $(anchor).siblings(input) find inputs
then go through each element from first step and return their value
function generalBottom(anchor) {
var input = 'input[data-name^="noValues"]'
var values = $.map($(anchor).siblings(input), (elemnt, index)=>{
return elemnt.value
})
$('#shows').val(values.join())
}
$('button').on('click',function(){
generalBottom(this)
})
hope this helps

how to select one single text from multiple text inside html tags with css selector?

<span class="filter-dot hidden"></span>
Brand <span class="filter-count hidden">(0)</span>
<input type="hidden" class="js-filter-count" value="0">
<span class="filter-clear hidden" data-displaytype="checkBox">
Clear
</span>
I want to select only 'Brand',but when i'm using $('div.filter-type-name').text(); it selects 'Brand' as well as 'Clear'. Can anyone please suggest me how can I select 'Brand' only?

Wrap "Brand" into one more specific selector and select it only:
<div class="filter-type-name">
<span class="filter-dot hidden"></span>
<span class="filter-name">Brand</span>
<span class="filter-count hidden">(0)</span>
<input type="hidden" class="js-filter-count" value="0">
<span class="filter-clear hidden" data-displaytype="checkBox">Clear</span>
</div>
Then:
$('div.filter-type-name .filter-name').text()
Otherwise, use childNodes collection to iterate through it and select what you need (Node.TEXT_NODE === 3), but this is not very practical:
$('div.filter-type-name')[0].childNodes

Either give Brand its own surrounding element with a class or id, say "brand-name" and do:
$('div.filter-type-name .brand-name').text()
or keep it as is and do:
$('div.filter-type-name').text().split(' ')[0];

THIS ONE seems to solve it.
Here's the JSFiddle:
https://jsfiddle.net/flamedenise/9dsfbkms/
var text = ($(".filter-type-name").clone().children().remove().end().text()).trim();
alert(text);

Without wrapping your 'Brand' string into a tag. You can use the below method.
Suppose here is your code:
<div class="filter-type-name">
<span class="filter-dot hidden"></span>
Brand
<span class="filter-count hidden">(0)</span>
<input type="hidden" class="js-filter-count" value="0">
<span class="filter-clear hidden" data-displaytype="checkBox"> Clear </span>
</div>
You can use the regular expression match script for checking the text you want.
var str = $('div.filter-type-name').text();
var res = str.match(/Brand/g);
To see the output,
<p id="demo"> </p>
document.getElementById("demo").innerHTML = res;

Assigning unique models and ids to checkboxes within ng-repeat

I'm trying to understand data-binding with AngularJs and I'm working on a simple form that uses ng-repeat to render a set of accordions. The headings of each accordion has a status box that is red by default, yet when the accordion is expanded, checking the checkbox within should turn the status box green.
The problem I'm having is that when I check a checkbox, it turns the status box of each accordion heading green; not just the status box relevant to the checkbox.
I know I need to assign a unique model to each status box/checkbox but I'm unsure how. I've seen some examples with $index but I haven't been able to apply it to my problem.
The HTML is as follows:
<ul class="radio-accordion">
<li class="radio-accordion-item" ng-repeat="animal in ctrl.animalTypes">
<input id="input{{$index + 1}}" type="checkbox" name="input" />
<div class="radio-accordion-header grey">
<div class="radio-accordion-header-left">
<div class="radio-accordion-header-title-wrapper">
<span class="status-led {{ctrl.checkedStatus}}"></span>
<h1 class="radio-accordion-header-title text-blue">{{animal.name}}</h1>
</div>
</div>
<div class="radio-accordion-header-right"></div>
<label class="expander-blue" for="input{{$index + 1}}"></label>
</div>
<div class="radio-accordion-body white">
<div class="padd-10 marg-left40">
<div class="toolbar-flex marg-top-10 marg-bott0">
<input class="restyled"
id="input{{$index + 1}}"
name="input"
type="checkbox"
ng-model="ctrl.checkedStatus"
ng-change="ctrl.setConsent()"
ng-true-value="'green'"
ng-false-value="'red'" />
<label class="restyled-label"
for="input{{$index + 1}}"><em>I like this animal</em></label>
</div>
</div>
</div>
</li>
`
Any help appreciated!
EDIT: This is what I did in case it helps anyone in the future!
<ul class="radio-accordion">
<li class="radio-accordion-item" ng-repeat="animal in ctrl.animalTypes" ng-model="animal.checked>
<input id="input{{$index + 1}}" type="checkbox" name="input" />
<div class="radio-accordion-header grey">
<div class="radio-accordion-header-left">
<div class="radio-accordion-header-title-wrapper">
<span ng-class="{'status-led red': animal.checked == false, 'status-led green': animal.checked == true}"></span>
<h1 class="radio-accordion-header-title text-blue">{{animal.name}}</h1>
</div>
</div>
<div class="radio-accordion-header-right"></div>
<label class="expander-blue" for="input{{$index + 1}}"></label>
</div>
<div class="radio-accordion-body white">
<div class="padd-10 marg-left40">
<div class="toolbar-flex marg-top-10 marg-bott0">
<input class="restyled"
id="input{{$index + 1}}"
name="input"
type="checkbox"
ng-model="animal.checked"
ng-change="ctrl.isChecked(animal.checked)" />
<label class="restyled-label"
for="input{{$index + 1}}"><em>I like this animal</em></label>
</div>
</div>
</div>
</li></ul>

If you aren't concerned about adding additional properties to your animal objects , or if there already exists a property in those objects that would be used as checkbox indicator just use:
ng-model="animal.SomeProperty"
An alternate way is to use a separate object and use $index as each key:
ng-model="ctrl.checkedStatus[$index]"

How to find tag is parent elements?

<div class="plp-product">
<a href="#">
<img src="../../../kay/images/PLP/jared_000.jpg" />
<small class="more-options">More options available</small>
<h3>Neil Lane Engagement Ring 1 3/8 ct tw Diamonds 14K White Gold</h3>
<h4 class="price">$4,299.00</h4>
<h4 class="price price--sale"> </h4>
<span class="icon-search"></span> Quick View
<label class="compare-button">
<input type="checkbox" id="item1" class="chk" onclick="getImg(this)">Compare</label>
</a>
</div>
JS:
var getImg = function(val){
var data = document.getElementById(val.id).parentElement.parentElement;
data.find('img');}
I want access the img tag in data. Not able to find a workaround for this.Please help me on this. Thanks.

Here is a sample code in pure JavaScript.
It traverse the DOM tree to get from the checkbox to an image element.
var getImg = function(ele){
var anch = ele.parentNode.parentNode;
var img = anch.getElementsByTagName('img')[0];
alert(img.src);
}
<div class="plp-product">
<a href="#">
<img src="../../../kay/images/PLP/jared_000.jpg" />
<small class="more-options">More options available</small>
<h3>Neil Lane Engagement Ring 1 3/8 ct tw Diamonds 14K White Gold</h3>
<h4 class="price">$4,299.00</h4>
<h4 class="price price--sale"> </h4>
<a href="#" class="button--quick-view">
<span class="icon-search"></span> Quick View
</a>
<label class="compare-button">
<input type="checkbox"
id="item1"
class="chk"
onclick="getImg(this)">Compare
</label>
</a>
</div>

data is not a jquery object (since you got it with a native function) and thus does not have the find method.
so instead of
data.find("img");
try
$(data).find("img");

I'm assuming that this will be some generated markup and that there are many products on the same page.
My solution would be to simply add some sort of id to the img element and then reference that in the on-click event. That way if you change the structure of the HTML in the future it the click wont break.
<div class="plp-product">
<a href="#" id="product_id" >
<img id="product_id_img" src="../../../kay/images/PLP/jared_000.jpg" />
<small class="more-options">More options available</small>
<h3>Neil Lane Engagement Ring 1 3/8 ct tw Diamonds 14K White Gold</h3>
<h4 class="price">$4,299.00</h4>
<h4 class="price price--sale"> </h4>
<span class="icon-search"></span> Quick View
<label class="compare-button">
<input type="checkbox" id="item1" class="chk" onclick="getImg(product_id)">Compare</label>
</a>
</div>
Then in the click function:
var getImg = function(productid)
{
var img = document.getElementById(productid + "_img");
}

traversing this with jquery gives me undefined

When I click .getdata, I want to go from .getdata to name=top and read the value of whichever option is selected (in this case it's 0), but I'm having a hard time getting to it. I keep getting undefined.
This is my html. The div class="main" repeats so I can't simply select input[name=top]. It would have to be through traversing the tree to the closest input[name=top]. Can someone get this right? I'm starting to think it's a browser error because I tried different options and all give me undefined.
<div class="main">
<div class="branch">
<div class="element">
<label>top color:</label>
<input type="radio" value="1" name="top">black
<input type="radio" value="0" name="top" checked="checked">white
<input type="radio" value="null" name="top">transparent
</div>
</div>
<div class="controls">
<a class="getdata">get data</a>
</div>
</div>
<div class="main">
....
</div>

$('a.getdata').click(function() {
var val = $(this).closest('.main').find('input[name="top"]:checked').val();
});
Place a click()(docs) event on the <a> element
On a click, use the closest()(docs) method to traverse up to the .main element
Then use the find()(docs) method along with the the attribute-equals-selector(docs) and the checked-selector(docs) to get the checked name="top" radio.
Finally use the val()(docs) method to get its value.

$(".getdata").click(function(){
selectedValue=$(this).parent().prev().children().children("input[name=top]:checked").val();
console.log(selectedValue);
});