Get id of previous select tag - javascript

I have next structure:
<div class="input_fields_wrap">
<div class="row">
<select id="house-1-room-1"><?php echo $options; ?></select>
<input type='text' class='name' name='house-1-room-size-1' placeholder='Room Size'>
</div>
</div>
<button class="add_field_button">Add Another Room</button>
When add_field_button clicked, I am trying to get the id of previous select tag, in my case it is house-1-room-1 with jquery (or vanila js).
I've tried:
$(this).parent().prev("select").attr('id');
and
$(this).prev("div").closest("select").attr('id');
And many other combination of above to no avail.
Please help!

Use:
$(this).prev("div").find("select").attr('id');
.closest() goes up in the DOM hierarchy, find() searches down the hierarchy.

Need to use find():
$(this).prev("div").find("select").attr('id');
The .closest() is the opposite, goes from bottom to top. While .find() will go from the current place inside the hierarchy.

find the previous element and find the select tag within that
$(this).prev().find('select').attr('id')
this should work
here is a fiddle https://jsfiddle.net/fxabnk4o/3/

Related

Closest() in jQuery doesn't work when at the same level

Problem:
I want (after clicking on a button - this part is OK) to select the closest element with a class .my-textarea, but the using of prev() is not always possible, because the code is dynamic. Could you help?
Details:
I have this HTML code:
<div class="row">
<div class="label">Description:</div>
<textarea class="my-textarea" name="my-textarea" rows="8" cols="40"></textarea>
<button type="button" class="my-submit" name="my-submit">Save</button>
</div>
And my JS code (in on button with class "my-submit" click event) is:
var text = $(this).closest('.my-textarea').val();
But it's not working. I am getting undefined.
If I tried:-
var text = $(this).prev().val();
I will get the text of the text-area, but as I've mentioned, my code is dynamic and the order and number of elements will change. So, prev() is out of option.
Any idea how to make closest() work?
I always select parent and than search for child with class. That way your element can be placed virtually anywhere in parent.
$(this).parent().find('.my-textarea').val();
Need to Use siblings() instead of closest():-
$('.my-submit').click(function(e){
e.preventDefault();
var text = $(this).siblings('textarea').val();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="label">Description:</div>
<textarea class="my-textarea" name="my-textarea" rows="8" cols="40"></textarea>
<button type="button" class="my-submit" name="my-submit">Save</button>
</div>
You need to refer it using class
closest will traverse up the DOM tree to look for the element, while in this case textarea is sibling of the button.
$('.my-submit').click(function(){
var text = $(this).siblings('.my-textarea').val();
alert(text)
})
DEMO

jQuery selector, cant pass through

I have
echo '<div><span>'.$wiersz['data'].'<i> added by: '.$wiersz['username'].'</i></span><span>Rate: </span><i **FROM HERE**>'.$wiersz['likes'].'</i><i>'.$wiersz['unlikes'].'</i></div>';
echo '<div><span>'.$wiersz['data'].'<i> added by: '.$wiersz['username'].'</i></span><span>Rate: <i>Thank you</i></span><i **OVERHERE**>'.$wiersz['likes'].'</i> <i>'.$wiersz['unlikes'].'</i></div>';
How Can I go FROM (FROM HERE) to the (OVER HERE) by selectors in jQuery?
I'm hiding first div and showing second div. I need to increase innerText of OVERHERE but I dont know how to go there by selectors.
I did:
$(this).parent().next()
this lead me to second div but still cant go into OVERHERE in second div.
try this..
$(this).parent().next().children()[2]
Assuming this is how the rendered HTML looks like
<div>
<span>data<i> added by: username</i></span>
<span>Rate: </span>
<i onclick="$(this).closest('div').next().find('i').eq(2).text(parseInt($(this).text(),10))">25 Likes</i>
<i>unlikes</i>
</div>
<div>
<span>data<i> added by: username</i></span>
<span>Rate: <i>Thank you</i></span><i>Will be overwritten </i> <i>unlikes</i>
</div>
Or $(this).parent().next() instead. However closest is safer in case you wrap your <i> in something

Finding correct SPAN tag using jQuery prev() and next()

Hey all I am needing the following html code to get the value of "deliver best smile" which seems to be 6 prev() and 2 Next().
<div id="eea305a4-32b2-434d-8623-4dc3e2fcf119F_SelectMany" class="lfFormField
lfFormFieldSelectMany F_Form1-P_NewPage-F_SelectMany">
<div class="">
<fieldset class="composite-field-fieldset">
<legend class="no-form-field-mandatory-sign-css">
<span id="F_SelectMany-required"
class="form-field-mandatory-sign-css lfFormFieldRequiredMarker no-form-field-mandatory-sign-css">*</span>
<span class="form-field-title-sign-css lfFormLabel">deliver best smile</span>
</legend>
<div style="padding=left:0.1em"
dojoattachevent="onmouseover:onMouseOver, onclick:onClick, onmouseout:onMouseOut"
class="dojoDndHandle freedom-base-mixin-css"
id="eea305a4-32b2-434d-8623-4dc3e2fcf119F_SelectMany-widget"
widgetid="eea305a4-32b2-434d-8623-4dc3e2fcf119F_SelectMany-widget">
<ul id="e2b7488e-a88c-4da0-8287-4f8e4e6091f4tbl"
dojoattachpoint="containerNode,focusNode"
class="selection-group">
<li dojoattachpoint="listItem"
class="vertical-selection-group-item"
id="freedom_widget_solution_form_FreedomOptionButton_0"
value="0" type="checkbox"
widgetid="freedom_widget_solution_form_FreedomOptionButton_0">
<div class="selection-group-item-container notDojoDndHandle">
<span dojoattachevent="onmouseover:onMouseOver, onclick:onClick, onmouseout:onMouseOut"
class="selection-group-item-input dijitInline freedom-base-mixin-css freedom-base-mixin-cssChecked dijitChecked"
widgetid="2ff949f4-c88e-4769-8e36-23c81661af92-btn">
<input dojoattachpoint="textbox,focusNode,_aroundNode"
id="2ff949f4-c88e-4769-8e36-23c81661af92-btn"
class="dijitReset dijitCheckBox notDojoDndHandle"
type="checkbox" tabindex="0"
dojoattachevent="onclick:_onClick"
role="checkbox" aria-checked="true"
name="group_eea305a4-32b2-434d-8623-4dc3e2fcf119F_SelectMany-widget"
value="Achieve and maintain quality"
style="-webkit-user-select: none;">
</span>
<div class="selection-group-item-text-container dijitInline">
<label dojoattachpoint="titleNode"
for="2ff949f4-c88e-4769-8e36-23c81661af92-btn"
class="selection-group-item-text bold-selection-group-item">Achieve and maintain quality</label>
</div>
</div>
</li>
My position at that time is at the Achieve and maintain quality value from the input tag.
Currently I tried the following:
if ($(this).is(":checked")) {
var testing = $(this).prev().prev().prev().prev().prev().prev().next().next().html();
console.log(testing);
loop++;
}
The var testing is what I am trying to get that value from but it comes up with "undefined" so I am guessing I am not stopping at the correct spot?
Any help would be great!
You could try traversing up to the parent container and then doing a find on that element by it's class.
For example:
Traverse to parent by id:
$(this).closest('#eea305a4-32b2-434d-8623-4dc3e2fcf119F_SelectMany').find('.form-field-title-sign-css');
Traverse to parent by class:
$(this).closest('.lfFormField').find('.form-field-title-sign-css');
Or travers to parent by HTML element:
$(this).closest('fieldset').find('.form-field-title-sign-css');
And to get the value, in this case you would probably want to do .text() instead of .html(). Unless of course you actually want all the HTML.
And finally, if this id F_SelectMany-required isn't random. You could do this instead. Which should help it be a bit more specific.
$(this).closest('.lfFormField').find('#F_SelectMany-required').children('.form-field-title-sign-css');
Check this code
$(function(){
var $lbl=$("label[dojoattachpoint='titleNode']"); //Your position
$lbl.click(function(){
if (!$("#" + $(this).attr("for")).is(":checked")) {
var $fieldset=$(this).closest("fieldset");
alert($("legend",$fieldset).find("span").text());
}
})
})
Jquery's prev() gives you the previous sibling. In the DOM of the document you are posting, the input with "Achieve and maintain quality" in the value, does not have any siblings. It is the only child of the span that surrounds it, so you are going to get undefined no matter what combination of prev() and next() you do. Did you mean to use parent() instead of prev()?
But much better to give that span an id
deliver best smile
and get to it by using $("#SmileSpanId")

How to remove all elements in a div after a certain div

So I have a div that is drawing in dynamic elements at its bottom and I want to hide these elements, no matter what their IDs are using javaScript/jQuery. Basically my HTML looks like this:
<div class="right-panel">
<div class="info">Text</div>
<form id="the-form">
<input type="hidden" name="first-name" value="">
<input type="hidden" name="last-name" value="">
<input type="hidden" name="state" value="">
</form>
<script>javaScript</script>
<div id="dynamic-id-1">Advertisement 1</div>
<div id="dynamic-id-2">Advertisement 2</div>
</div>
I'd like to ensure that the "dynamic-id-1" and "dynamic-id-2" divs are always removed or hidden no matter what their ID's are (their IDs are subject to change). How do I target these elements without targeting their IDs?
Edit--I tried this, but my approach seems limited, and I couldn't get it to work with multiple divs, even when chaining:
$('#the-form').next().hide();
(Note: unfortunately they don't have a class, there are multiple divs, and the IDs are always completely different. I was hoping there might be novel way to target the last two divs of the wrapping div and hide them)
If the script tag is always before the div's that need removing you could do this -
$('.right-panel > script').nextAll('div').remove();
http://jsfiddle.net/w6d8K/1/
Based on what you tried you could do this -
$('#the-form').nextAll('div').hide();
http://jsfiddle.net/w6d8K/2/
Here are the docs for nextAll() - https://api.jquery.com/nextAll/
The simplest route would be to add classes to the dynamic elements. Something like:
<div class="removable-element" id="dynamic-id-1">Advertisement 1</div>
Then, you can do something like:
$(".right-panel .removable-element").remove()
If only one div at a time is generated dynamically. Add this to dynamic generation:
$('#the-form + div').hide();
Another method to achieve the same (not preferred) is:
$('#the-form').next('div').remove();
You are saying you don't want to target their "id", but is there some specific part in the id that will remain the same ?
like for instance "dynamic-id-" ?
If this is the case you can target them by using a "like selector". The code below would target all divs whose ID is starting with "dynamic-id"
$('div[id^=dynamic-id]').each(function () {
//do something here
});
Target the class instead of the dynamic ID.
<div class="element-to-remove" id="dynamic-id-1" />
<div class="element-to-remove" id="dynamic-id-2" />
$('.right-panel . element-to-remove').remove();

getElementById returns allways null if i search for new created Element

i want to duplicate one element and then assign to new id and names. my aim is later i want find that element again. here is an example:
<div id="contDiv">
<div style="float:left"> filename </div>
<div style="margin-left: 323px"> playtime(in Sek.) </div>
<div id="tl_Einst" class="editor-field">
<select id="Medianames" onchange="change(this)" name="TL_Medianame">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg- for="Filename"> </span>
<select id="playtime" class="playtime" name="playtime" disabled="">
</div>
<input id="More" type="button" onclick="Addfiles()" value="+">
</div>
in the runtime i duplicate the Element "tl_Einst" with its children. then the user changes the content of the combox then i read them and send them to the server. later i get an answer. so i call the GetelementById("newElementID"), but i get always null, if search for the new created element. what can i do?
thank you
marek
The proper syntax is:
var el = document.getElementById("newElementID");
Typically, # is for JQuery or other javascript frameworks, or as #Quention mentions below, can also be used with document.querySelector.
Where are you adding the element to the DOM? Could you include that code too?
Have you added it to the page?
getElementByID will only find an element in the DOM. You can either add it to the page or simply assign it to a variable.
var newElementID= document.createElement("p");
You can now find it in your code with newElementID even if it's not in the page.

Categories