Get an element after $(this) - javascript

I try to change a text insert in an div box with jquery. Here is the Code:
<div onClick="$(this span).text('My new Text');" class="switch switch-success" style="float: right;">
<label>
<input type="checkbox"><span>Yes</span>
</label>
</div>
I want to change this "Yes" to "No". Thanks for help ;)

Use the .find method
See a working fiddle here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onClick="$(this).find('span').text('My new Text');" class="switch switch-success" style="float: right;">
<label>
<input type="checkbox"><span>Yes</span>
</label>
</div>

You have two options.
Pass this a second parameter which is context
$('span', this).text('My new Text');
Get this element and that use find to get span in it.
$(this).find('span').text('My new Text');

Please separate structure, style and function - the CSS, HTML and JS should not be in the same space - its always better to separate the code for better code quality.Also you could do a toggle for the states of the checkbox so that there is different text on the "checked" and "not checked" states.
And you can even do that with CSS
$('.switch').click(function(){
$(this).find('span').text('My new Text')
})
.switch{float: right}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="switch switch-success" >
<label>
<input type="checkbox"><span>Yes</span>
</label>
</div>

Related

css jquery checkbox toggle display

I have this function to toggle the display of the text when clicked, but I have about 5 different of these in my application where everything is called different ID's, is there a way of doing that without having to create 5 different functions?
This is my attempt of doing it given the ID but am not sure on how to do without, but the issue i am getting when doing all is it will toggle all 5 at the same time, when its meant to be one by 1
$('#isAgeSelected').click(function() {
$("#txtAge").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
Or, is there a different way in doing it in vb.net?
All help is appreciated :)
You can add a data- attribute to the checkbox, containing the ID of the element you want toggled.
(Note that I changed the ID isAgeSelected to a class; IDs should always be unique, since JavaScript will only select the first instance of an ID that it finds.)
$('.isAgeSelected').click(function() {
$($(this).data('toggle')).toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" data-toggle="#txtAge" class="isAgeSelected"/>
<input type="checkbox" data-toggle="#txtAge2" class="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
<div id="txtAge2" style="display:none">Age is nothing</div>
You don't need the ID to select the checkboxes, use a generic class instead.
This solution relies on the fact that the text is the next sibling of the checkbox.
$('.isAgeSelected').click(function() {
$(this).next().toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="isAgeSelected"/>
<div class="txtAge" style="display:none">1Age is something</div>
<input type="checkbox" class="isAgeSelected"/>
<div class="txtAge" style="display:none">2Age is something</div>
<input type="checkbox" class="isAgeSelected"/>
<div class="txtAge" style="display:none">3Age is something</div>
Use a function. Like so:
function doSomething(firstObjectSelector, secondObjectSelector){
$(firstObjectSelector).click(function() {
$(secondObjectSelector).toggle(this.checked);
});
}
Usage:
doSomething('#isAgeSelected', '#isAgeSelected'); //using ids
or
doSomething('.isAgeSelected', '.isAgeSelected'); //using classes
or
doSomething('div', 'span'); //using tags

jquery remove label text

I'm trying to remove the Search text from this html input element. I recognize the element is inside the label thats how it was built. Is there any way to remove the Search text but keep the input element.
Here is my HTML Code
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
Here is my JavaScript Code:
$("#datatable_users_filter label").css("display","none");
It removes the entire element not just the Search label.
In your javascript, you can set a variable equal to the input, clear the contents of the label, and then append the input to the now-empty label.
var input = $('#datatable_users_filter label input');
$("#datatable_users_filter label").html('');
$("#datatable_users_filter label").append(input);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
This is just one solution and may or may not work for your use case. Another option could be doing a string replace on the innerHTML of the label.
$("#datatable_users_filter label").html($("#datatable_users_filter label").html().replace('Search ', ''));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
sapmle for remove label text
$("#datatable_users_filter label").html($("#datatable_users_filter input"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
sapmle for remove label element
var elem=$("#datatable_users_filter input");
$("#datatable_users_filter").empty().html(elem);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
Keep Label and Input like this..
<label class="label">Search</label>
<input type="search"/>
Then hide it by jquery
$('label').hide();

Can't select and hide any previous element

I'm about lose my mind with this problem. No form of jQuery selector seems to work in dynamically finding any elements above the link. I'm trying to access an element above the link and hide it. Using things like parent(), prev(), before(), closest(), ect. will show a non-null object but it won't respond to the hide() method.
<div class="row">
<div class="col-xs-5">
<div id="test_fields">
<li id="test_input" class="string input optional stringish">
<label class="label" for="test_input">Ingredient name</label>
<input type="text" name="test_input" value="afsfasf" id="test_input">
</li>
</div>
<input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
Remove Ingredient
</div>
</div>
function remove_fields(link)
{
$(link).prev("input[type=hidden]").val('1'); // this doesn't work
var divToHide = $(link).prev('div');
$(divToHide).hide() // this doesn't work
//$('#test_fields').hide(); //this works
}
Try replacing the link as below:
Remove Ingredient
I'm not sure. But maybe this is the problem. Because I remember that I have had problem with 'this'previously and when I replaced that, it performed the job.
you can try .closest() and .find()
function remove_fields(link) {
$(link).closest('div[class^="col-xs"]').find("input[type=hidden]").val('1');
var div_to_hide = $(link).closest('div[class^="col-xs"]').find('#test_fields');
$(div_to_hide).hide();
//$('#test_fields').hide(); //this works
}
You can't change hidden input's "value" attribute by using .val(). You need to use:
$(link).prev("input[type=hidden]").attr('value', '1');
As I'm not really sure what do you want to do with this input, I'll just let it go like this.
.prev() fn goes only one previous element in the structure. As input is a <a>'s previous element, you can't select div like that. You can use .siblings() for instance.
$(link).siblings('div').hide();
If you break the code in pieces, it gets easier.
First I took the 'Link', from it I grabbed the nearest div above it, then I picked up the input.
I did not make many changes to your code.
function remove_fields(link)
{
var $link =$(link);
var $divToHide = $link.closest('div');
$divToHide.find("input[type='hidden']").val('1');
$divToHide.hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div id="test_fields">
<li id="test_input" class="string input optional stringish">
<label class="label" for="test_input">Ingredient name</label>
<input type="text" name="test_input" value="afsfasf" id="test_input">
</li>
</div>
<input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
Remove Ingredient
</div>
</div>

How to change the text of a <label> which is hidden

I want to change the text of a label whose parent has its display hidden. I am not able to access the label because of its parents visibility.
I would like to know is there a way to change the text of this label without the changing the visibility of the parent.
I tried changing the visibility of the label and changing the text and hiding it back, did not work.
$(document).ready(function(){
$("#394").find(".name").children("label").text("Home");
});
<div class="sample1" style="display: none;">
<div id="394">
<div class="name">
<label>house.jpg</label>
</div>
</div>
</div>
Any suggestions/ideas?
Answer:
First, Thank you all for the response.
I fixed the issue.
This is the change I made and it worked.
$(document).ready(function(){
$(".sample1").find(".name").children("label").text("Home");
});
<div class="sample1" style="display: block;">
<div style="display: none;" id="398">
<div class="name">
<label>Sample</label>
</div>
</div>
</div>
Sample
(Updated) http://jsfiddle.net/SXLnt/1/
(Old) http://jsfiddle.net/SXLnt/
Solution
$("#394 label").text("new_house.jpg");
$(".sample1").show(); // show hidden result
Sample HTML
<form id="parent_form" style="display: none; visibility: hidden;">
<label for="male" id="lb_male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female" id="lb_female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
Sample JS (jQuery)
$("#lb_male").text("Man"); // Change text 1
$("#lb_female").text("Woman"); // Change text 2
//$("#parent_form").show(); // Show parent
Sample DOM result
IF the label's ID is lblSomething, you could do it in JQuery as so ...
$("lblSomething").val("Changed value")
Hope it helps.
If what you posted is your full code, it looks like you are missing a closing tag on your outer div. Try this:
<div class="sample1" style="display: none;">
<div id="394">
<div class="name">
<label>house.jpg</label>
</div>
</div>
</div>

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);
});

Categories