I have very mess html code like this and i cant influence the structure.
<div class="head">
<p class="any">something 1</p>
</div>
<input type="text" class="mand" value="1">
<div class="head">
<p class="any-else">something 2</p>
</div>
<div class="foo">
<input type="text" class="mand" value="2">
</div>
<div class="head">
<p class="any">something 3</p>
</div>
<div class="foo">
<div class="another-needless-div">
<input type="text" class="mand" value="3">
</div>
</div>
I need for every input with class "mand" the next above text from p in the head-div.
For example: For the input field with value"3", I need the p text "something 3".
$(".mand").each(function(){
console.log( $(this).prev(.head).find('p').text() ); // not working
});
How can i get this content? Thank you!
You can try something like this, this will loop through each parent until it has a prev element with the class head
function parent(obj) {
if ($(obj).prev(".head").length) {
return $(obj).prev(".head").find("p").text()
} else {
return parent($(obj).parent())
}
}
$.each($('.mand'), function() {
console.log(parent($(this)));
})
function parent(obj) {
if ($(obj).prev(".head").length) {
return $(obj).prev(".head").find("p").text()
} else {
return parent($(obj).parent())
}
}
$.each($('.mand'), function() {
console.log(parent($(this)));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="head">
<p class="any">something 1</p>
</div>
<input type="text" class="mand" value="1">
<div class="head">
<p class="any-else">something 2</p>
</div>
<div class="foo">
<input type="text" class="mand" value="2">
</div>
<div class="head">
<p class="any">something 3</p>
</div>
<div class="foo">
<div class="another-needless-div">
<input type="text" class="mand" value="3">
</div>
</div>
please try this
console.log( $(this).prev('.head').find('p').text() );
If you really can't fix your code, and it will always be like that (which, of course we both now it can be improved), you can code it like this:
$.each($('.mand'), function(){
console.log($(this).parent().siblings().children('p').text());
})
If you could be able to have ".foo" div parent for every ".mand", it would look like this.
$(".mand").each(function(){
console.log( $(this).closest('.foo').prev('.head').find('p').text() );
});
it would work for this html
<div class="head">
<p class="any-else">something 2</p>
</div>
<div class="foo">
<input type="text" class="mand" value="2">
</div>
<div class="head">
<p class="any">something 3</p>
</div>
<div class="foo">
<div class="another-needless-div">
<input type="text" class="mand" value="3">
</div>
To solve this problem, first you need to structure your html codes as follows (Your original codes use different structure for each input, which makes hard for the selector to find the correct contents in the p tag. Also, it is a good practice to name the similar components with the same class name.):
<div class="head">
<p class="any">something 1</p>
</div>
<div class="foo">
<input type="text" class="mand" value="1">
<div>
<div class="head">
<p class="any">something 2</p>
</div>
<div class="foo">
<input type="text" class="mand" value="2">
</div>
<div class="head">
<p class="any">something 3</p>
</div>
<div class="foo">
<input type="text" class="mand" value="3">
</div>
Then, you could simply use the following jQuery codes to get the contents:
$(".mand").each(function(){
console.log($(this).parent().prev().children(".any").text());
});
Hope this could help!
Related
I want to get the child element dynamically. I am looping through the div tag to get the values. But its not working.
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" xl="12" value="a">
</div>
<div class="fg">
<input type="text" xl="34" value="b">
</div>
</div>
</div>
</div>
The javascript function for fetching the value dynamically
This code is working if row and col div are not there. But when they are included its not working at all. Anyone can please help me with this issue!
$(".pg").each(function(){
$(this).children(".fg").each(function() {
console.log($(this).attr('xl'));
});
});
First using children(), will return only direct children , not deep search ,
Second , use data-xl instead of xl ,more information here about data attribute
also , the loop is accessing the parent div of input , so use ".fg input" instead
for searching use find() , then change selector to access directly your input , .find(".fg input")
See below working snippet :
$(".pg").each(function() {
$(this).find(".fg input").each(function() {
console.log($(this).val() ,"=", $(this).data('xl'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="12" value="a">
</div>
<div class="fg">
<input type="text" data-xl="34" value="b">
</div>
</div>
</div>
</div>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="15" value="c">
</div>
<div class="fg">
<input type="text" data-xl="84" value="d">
</div>
</div>
</div>
</div>
I am building a specific time checkbox and upon click I need the days of the week to drop down with a checkbox. Once the user clicks that checkbox the [From - To] appears.
The thing is I have multiple of these going down and need to only display for the certain one I clicked.
So far I only have it set it for Monday but I cant get the from-to to appear on the first one.
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
</div>
</div>
</div>
$('.specificTime').on('click', function() {
$(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});
$('.monday').on('click', function(){
$(this).parents('.specificHolder').find('.monday_to_from').toggle('slow');
});
https://jsfiddle.net/y1b8fr20/
Update
Using toggle() between more than one trigger creates a confusing behavior. This update separates the sliding of up and down and listens for the change event instead of the click event for more control between .monday checkboxes. Now it will behave as follows:
The to from boxes only appears when a .monday checkbox is checked
If a .monday checkbox is unchecked, the .to from boxes will slideUp.
If either .monday is checked, fromto stays.
fromto will only slideUp if both .mondays are unchecked
You have only one from to input so this is sufficient:
$('.monday').on('change', function() {
if ($('.monday').is(':checked')) {
$('.monday_to_from').slideDown('slow');
} else {
$('.monday_to_from').slideUp('slow');
}
});
Move this out of the influence of the second set of checkboxes:
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
Demo
$('.specificTime').on('click', function() {
$(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});
$('.monday').on('change', function() {
if ($('.monday').is(':checked')) {
$('.monday_to_from').slideDown('slow');
} else {
$('.monday_to_from').slideUp('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
What I want is when someone click on button, set the phone number to input value. The block is a loop in which different email and phone number appears. if some one click in a specific block get the phone number from that block only. Thanks.
<div class="block">
<div class="phone"><span>+1234567</span></div>
<div class="email">
<span>email#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+7696686</span></div>
<div class="email">
<span>another#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+897979877</span></div>
<div class="email">
<span>email2#email.com</span>
<button>CLick</button>
</div>
</div>
<input type="text" value="" id="phone">
Here is my code:
jQuery(document).ready(function() {
jQuery(".block button").click(function() {
var contents = jQuery(this).find(".phone span").text();
jQuery("#phone").val(contents);
});
});
You tagged jQuery so I'm assuming it's ok for you to receive an answer using jQuery. Try something similar to:
$('button').click(function(){
var phoneNumber = $(this).closest('.phone').find('span').text();
});
Try this-
jQuery(document).ready(function($) {
$(".block").each(function() {
$(this).find('button').click(function(){
var contents = $(this).parents('.block').find('.phone span').text();
$("#phone").val(contents);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<div class="phone"><span>+1234567</span></div>
<div class="email">
<span>email#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+7696686</span></div>
<div class="email">
<span>another#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+897979877</span></div>
<div class="email">
<span>email2#email.com</span>
<button>CLick</button>
</div>
</div>
<input type="text" value="" id="phone">
I'm currently looking for advice on some jQuery as I think I'm doing this incorrectly even though I'm getting the result I want.
I want to change the value of an input to the value of the closest input with a class of .milestone when it's changed. The input which I want to change is the holding input and I want it to the equal value of the revised input on change. Below is the HTML which I can't change unfortunately as this is a product.
<div class="container area dform_section_area6">
<div class="box box13 two">
<div class="dform_section_box13">
<div style="clear: both;" data-type="html" data-name="business_case_approved_pmr" id="dform_widget_html_business_case_approved_pmr" data-active="true" class="dform_widget dform_widget_type_html dform_widget_business_case_approved_pmr">
<p>Business Case Approved</p>
</div>
</div>
</div>
<div class="box box14 two">
<div class="dform_section_box14">
<div data-type="date" data-name="bc_approved_planned_pmr" data-active="true" data-agentonly="false" class="container dform_widget dform_widget_field dform_widget_type_date dform_widget_bc_approved_planned_pmr dform_widget_bc_approved_planned_bc">
<div>
<label for="dform_widget_bc_approved_planned_pmr">Planned</label>
</div>
<div>
<input id="dform_widget_bc_approved_planned_pmr" type="date" name="bc_approved_planned_pmr" data-mapfrom="bc_approved_planned_bc" class="dform_field_active">
</div>
</div>
</div>
</div>
<div class="box box15 two">
<div class="dform_section_box15">
<div data-type="select" data-name="bcapproval_on_target" data-active="true" data-agentonly="false" class="container dform_widget dform_widget_field dform_widget_type_select dform_widget_bcapproval_on_target dform_widget_">
<div>
<label for="dform_widget_bcapproval_on_target">On target?</label>
</div>
<div>
<select id="dform_widget_bcapproval_on_target" name="bcapproval_on_target" class="dform_field_active">
<option></option>
<option value="Yes" data-off="bc_approved_revised_pmr">Yes</option>
<option value="No" data-on="bc_approved_revised_pmr">No</option>
</select>
</div>
</div>
</div>
</div>
<div class="box box16 two">
<div class="dform_section_box16">
<div data-type="date" data-name="bc_approved_revised_pmr" data-active="false" data-agentonly="false" class="container dform_widget milestone mrevise dform_widget_field dform_widget_type_date dform_widget_bc_approved_revised_pmr dform_widget_">
<div>
<label for="dform_widget_bc_approved_revised_pmr">*Revised</label>
</div>
<div>
<input id="dform_widget_bc_approved_revised_pmr" type="date" name="bc_approved_revised_pmr" class="">
</div>
</div>
</div>
</div>
<div class="box box17 two">
<div class="dform_section_box17">
<div data-type="date" data-name="gate_3_actual1" data-active="true" data-agentonly="false" class="container dform_widget dform_widget_field dform_widget_type_date dform_widget_gate_3_actual1 dform_widget_">
<div>
<label for="dform_widget_gate_3_actual1">Actual</label>
</div>
<div>
<input id="dform_widget_gate_3_actual1" type="date" name="gate_3_actual1" class="dform_field_active">
</div>
</div>
</div>
</div>
<div class="box box18 last two">
<div class="dform_section_box18">
<div data-type="date" data-name="bc_approved_planned_bc" data-active="true" data-agentonly="false" class="container dform_widget param mrevise dform_widget_field dform_widget_type_date dform_widget_bc_approved_planned_bc dform_widget_">
<div>
<label for="dform_widget_bc_approved_planned_bc">holding</label>
</div>
<div>
<input id="dform_widget_bc_approved_planned_bc" type="date" name="bc_approved_planned_bc" class="dform_field_active">
</div>
</div>
</div>
</div>
</div>
I'm using the jQuery below to find the value of the input I want to update but I can't help but think that there must be a less long winded way to change this. I can't just reference the input's ID as I need to do this for 20+ fields.
$(this).parent().parent().parent().parent().next().next().find('.param').find('input').val()
This =
<input id="dform_widget_bc_approved_revised_pmr" type="date" name="bc_approved_revised_pmr" class="">
You can use closest() method instead and find recursive parent() element and then find child level element for siblings.
$(this).closest(".dform_section_area6").find('.param:last input').val()
for the following:
<div class="section grouping">
<div class="sectionControl">
<div class="parent row errorOn">
<div class="validGroupControl">
<div class="row2 itemWrap clearfix">
<label>Login1 (adress e-mail)<span class="iconReq"> </span>:</label>
<input type="text" class="text">
</div>
<div class="itemWrap clearfix">
<label>Input field1<span class="iconReq"> </span>:</label>
<input type="password" class="text">
</div>
remove
</div>
</div>
</div>
<div class="row addControl">
Add
</div>
</div>
when I run this:
$('div.addControl a.button').click(function () {
var parent = $(this).closest('.section.grouping').find('.parent:last');
parent.after(parent.clone());
});
it clones 'parent' section which works great. But i want it to clone it without values in the input fields.
what's the best way to clear all input fields in a section?
thanks
Can't see any reason why this won't work..
var oClone = parent.clone();
oClone.find("input").val("");
parent.after(oClone);