I have list of divs all with the same class, I want to apply a function to all of them which are not the clicked one (this), how can i select !this with jQuery?
UPDATE:
I've made this and it is not working, any ideas why?
$("li").each(function(){
$("li").not(this).click(function(e) {
$(this).hide();
});
});
UPDATE 2: this is the whole actual code:
$(".mark").click(function(e) {
e.preventDefault();
var id = "#" + $(this).parent().parent().parent().parent().attr("id") + " ";
var currentStatus = "deleted"; // to be replaced with actual status
var currentStatusClass = "." + currentStatus + "-heading";
$(id + currentStatusClass).show();
$(id + ".edit-headings").click(function(){
$(this).find(".headings-status").show().addClass("bg-hover");
$(id + ".headings-status").click(function() {
$(id + ".headings-status").not(this).hide();
});
});
});
Have a look at jQuerys not function: http://api.jquery.com/not/
$('div').not(this).doSomething();
Regarding your update, try:
$("li").click(function(e) {
$("li").not(this).hide();
});
Use the .not() function:
$('.yourclass').click(function() {
$('.yourclass').not(this).yourFunc();
});
use $('div').not(this) to select other than clicked one.
using :not() or .not()
$this;
function myFunction(){
// stuff here // and use $this for element reference
}
$('yourElement:not(.selected)').on('click',function(){
// (make sure to add '.selected' to the new one and toggle existant)
$('.selected').removeClass('selected');
$this = $(this);
$this.addClass('selected');
myFunction();
});
this is wrong:
var newStatus = $(this).className().replace("contribution-", "");
className is not a function.
Instead of above line you can try this:
var cls = $(this).attr('class').replace('contribution-','');
$(this).removeClass().addClass(cls);
Related
I am adding input fields on keystroke, by using an example from the answer for this question. This is my example. I was trying in various ways to remove field if user deletes content from it, so that there are always fields that have some content and one last empty field for adding more, but I just can't find a solution.
This is the code:
$(document.body).on("input", ".external-media-input:last", function () {
var inputID = (parseInt($(this).attr('id')) + 1);
$(".input_fields_wrap").append('<div><input class="external-media-input" id="' + inputID + '" name="external_media[]" type="text"/></div>');
});
You can use on('blur') or .on('focusout')
//...
.on('blur', ".external-media-input:not(:last)", function () {
if(!$(this).val()) $(this).remove();
});
JSFiddle
You can use also on('keyup')
$(document.body).on("keyup", ".external-media-input", function(){
if($(this).val() == '')
$(this).remove();
});
here is your fiddle: https://jsfiddle.net/bembvptx/2/
In your style add one more event:
$(document.body).on("input", ".external-media-input", function () {
if (!$(this).val())
{
$(this).remove();
}
});
I appended an element:
$("#usernames_list").append("<li class='username_item'>" + item.username + "</li>")
Then I tried to select the newly appended element:
$(".username_item").bind('click', function(){
alert("asdas");
})
tried this also:
$(".username_item").click(function(){
alert("asdas);
})
alert function is not working.
How to fix this? All those other answers did not help
Your code should work as is but is not very effective.
Simplest and most effective way would be to keep reference of your created element so you won't have to research it again:
var $container = $("<li class='username_item'>" + item.username + "</li>");
$container.appendTo($("#usernames_list"));
this way you can register your listener easily :
$container.click(function(){
alert("asdas");
})
You can add it this way:
var $container = $("#usernames_list");
var liClick = function() {
alert("ok");
}
$container.on('click', '.username_item', liClick);
And here is example: http://fiddle.jshell.net/scg32rzh/3/
All I need is to replace the form with class="simple_form calculation" when the jQuery dropdown has been selected. Here is my jQuery.
Can I use a .replaceAll for this?
$("#role_selector_for_questions").change(function(e) {
var $dropdown = $(this);
$.get('/calculations/role/' + $dropdown.val(), function(data) {
$dropdown.after(data);
});
});
Do you need to change the class of a form element
if so you can use jQuery .removeClass to remove current class and jQuery .addClass to add new class.
$("#role_selector_for_questions").change(function(e) {
var $dropdown = $(this);
$('yourformid').removeClass('old_form_class');
$('yourformid').addClass('simple_form calculation');
$.get('/calculations/role/' + $dropdown.val(), function(data) {
$dropdown.after(data);
});
});
I don't see where your 'form' element is defined, but changing a class on the form is as simple as using removeClass() and addClass().
$('#formToAddClass').removeClass('current_class').addClass('simple_form calculation');
BTW, looks like two classes are being added here - 'simple_form' and 'calculation'. Class names do not contain spaces.
$("#role_selector_for_questions").change(function(e) {
var $dropdown = $(this);
$.get('/calculations/role/' + $dropdown.val(), function(data) {
$("#role_selector_for_questison").replaceWith( "<div></div>" );
});
});
I'd like to know how to append link values to an input box. But I can't figure out how to append a new link value to the old one, separated by a space [Fiddle].
<input id="a_input_id" type="text">
<a href="" class="special_field_link">#ABC<a>
<a href="" class="special_field_link">#DEF<a>
<script>
$(function(){
$('.special_field_link').live('click', function()
{
$('#a_input_id').val($(this).html() + '');
return false;
});
});
Should I use something like:
var cur_val = $('#a_input_id').val($(this).html() + '');
if(cur_val)
$('#a_input_id').val(cur_val + "," + new_val);
else
$('#a_input_id').val(new_val);
Your help would be appreciate.
You can use like this,
$('.special_field_link').click(function (e) {
e.preventDefault();
$('#a_input_id').val($('#a_input_id').val()+" "+$(this).html());
});
Use event.preventDefault() to prevent the default click event of anchor. In each click you need to get the current input value, if you want to retain those. In your code, it was overwriting the old with the new values.
Fiddle
If you want to append the value, you could do:
var input = $('#a_input_id');
input.val(input.val() + $(this).html());
And note .live is deprecated, you'd better use .on instead if you switch to a new version of jQuery.
THE DEMO.
You could go with:
http://fiddle.jshell.net/s8nUh/149/
$(function()
{
$('.special_field_link').live('click', function()
{
var original = $('#a_input_id').val();
var val = original + ',' + $(this).html();
val = val.replace(/(^,)|(,$)/g, "");
$('#a_input_id').val(val);
return false;
});
});
$(function(){
$('.special_field_link').live('click', function()
{
$('#a_input_id').val($('#a_input_id').val() + $(this).html() + '');
return false;
});
});
To use best practices, its better to cache jquery object for anchor and also avoid using return false.
$(function(){
var txt$ = $('#a_input_id');
$('.special_field_link').live('click', function()
{
txt$.val(txt$.val() + $(this).html());
event.preventDefault();
});
});
I'm trying to search through the p tag content inside the .list and I'm probably just over complicating this but my alert isn't working, maybe it's because of other code I have on the page this isn't functioning but I was wondering if someone can help me figure out where I'm going wrong.
JS
$(document).ready(function() {
var sresults = $('.mainsearch input').val();
var sfinder = $('.list p').find(sresults).text(sresults);
$('.mainsearch input').keyup(function () {
$('.search-help').append(sfinder);
alert(sfinder);
});
});
HTML
<div class="mainsearch">
<input/>
<div class="search-help">Results:
</div>
</div>
<div class="list">
<span><p>test</p></span>
<span><p>another result</p></span>
<span><p>yet another result</p></span>
</div>
something like this?
$(document).ready(function() {
$('.mainsearch input').keyup(function () {
var sresults = $('.mainsearch input').val();
var sfinder = $('p:contains('+sresults+')').text();
$('.search-help').text("Results:" + sfinder);
alert(sfinder);
});
});
http://jsfiddle.net/h7uYB/
Update:
try this:
http://jsfiddle.net/h7uYB/2/
Typo?
alert(sfiner)
should be
alert(sfinder)
Try using the :contains() Selector. From the website:
Description: Select all elements that contain the specified text.
The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as a bare word or surrounded by quotation marks. The text must have matching case to be selected.
So for you:
var sfinder = $('.list p:contains(' + sresults + ')');
Are you just trying to return the paragraphs that match what's typed? Then you want to use :contains():
$(document).ready(function() {
$('.mainsearch input').keyup(function() {
var sresults = $('.mainsearch input').val();
var sfinder = $('.list p:contains("' + sresults + '")');
//$('.search-help').append(sfinder);
console.log(sfinder);
});
});
http://jsfiddle.net/mblase75/kQnTV/
You might be aiming for this, though:
$(document).ready(function() {
$('.mainsearch input').keyup(function() {
var sresults = $('.mainsearch input').val();
var sfinder = $('.list p:contains("' + sresults + '")');
$('.search-help').html(sfinder.clone());
});
});
http://jsfiddle.net/mblase75/kQnTV/1/