I have a little problem. I have a code with a form input, but the form input class is named
text-input small-input
I can't change this because of CSS issues and this is the problem, because when I add the space in my javascript code, my code doesn't work anymore
Javascript code
$(document).ready(function() {
$('.text-input*small-input').keyup(function() {
var search_term = $(this) .val();
$.post('search.php', {search_term:search_term}, function(data) {
$('.result').html(data);
$('.result li').click(function() {
var result_value = $(this).text();
$('.text-input*small-input') .val(result_value);
$('.result').html(' ');
});
});
});
});
So at the * sign, there needs to be a space. Any way to solve this? Thanks!
you do not want a space, you want nothing there. just .text-input.small-input to tell the selector engine to look for an element with both of those classes.
here is a very good article explaining multiple part selectors.
You had two issues. You don't want a space and you do want a dot on the second class.
To specify a requirement of two classes on the same object in a CSS selector, you put no space between the two class names:
$('.text-input.small-input') // find single object with both classes on it
With a space, it does something different:
$('.text-input .small-input') // find .small-input with ancestor .text-input
When you put a space between them, that creates a selector that finds an object that matches .text-input and a child that matches .small-input and the matched object is the child. No space between them means both classes must be on the same object. This is how CSS specifications work and isn't jQuery-specific.
FYI, what you were trying to do with this:
$('.text-input small-input') // find <small-input> with ancestor that is .text-input
was trying to find an object with a tag of <small-input> that had an ancesotr of .text-input because you put no special character in front of small-input so it was interpreted as a tag name.
Related
I am learning jQuery and new to it. I was trying to run some code but it was not running and then I found that I just need to give one space before ending double commas/quotes "
$("div:not([id=header]) " + strWhichTag).each(function(){
//some function
});
Now the question is that why do we need to give space after id=header]) if I remove that space and use this code, it doesn't work, the code below doesn't work but Why
$("div:not([id=header])" + strWhichTag).each(function(){
//some function
});
CHANGES------------------------
strWhichTag is basically h3 but it is not child to #header
Second thing I need to know is this
var oList = $("<ul id='bookmarksList'>");
here can I use single quotes and double quotes alternatively or I need to keep the same level like using double quotes and use sigle quotes inside them
I am learning it so any help will be appriciated
First question
The jQuery's argument is a CSS selector.
The space means that you are selecting a child of div:not([id=header]);
"div:not([id=header]) div#foo"
is not the same as
"div:not([id=header])div#foo"
Second question:
The "hierarchy" of quotes doesn't matter, "text'foo'dd" is OK, just as 'text"foo"dd'.
It's up to your taste, but usually using single quotes outside is more practical, since you can have the double ones, used most of the time, in the string.
Lets say
var strWhichTag = 'span';
$("div:not([id=header])" + strWhichTag)
evaluates to $("div:not([id=header])span") // No tag where div and span are equivalent
But if the same is $("div:not([id=header]) span") .. It will try to find all the spans inside the div tag which does not have given id
I dont know what strWhichTag but let assume it is a string like .class
without space, you arent looking a div that is not #header and with the class class.
<div class='class'></div>
This would be ok.
With a space, you are looking for an element with class class inside a div not #header.
<div><img class='class' /></div>
Here, it would select the img.
Edit: one missing piece of information - I can't use the class selector because there are more divs with the same class. I already thought of that, but I forgot to mention it. I have no idea why my post got downvoted, but it seems awfully silly considering I provided a lot of information, gave it honest effort, and tried to be verbose with code examples. People on this forum are ridiculous sometimes.
I'm trying to set the id of a div that doesn't have one and there's no way I can give it one upon generation of the page. I've tried using jquery (.each, .contains, .find, .filter, etc.) and I can't seem to get it right. I know a ton of people have asked this question, but none of the answers made sense to me.
I have the ability to set the text (html?) of the div, but nothing else. It ends up looking like this:
<div class="dhxform_note" style="width: 300px;">Remaining letters: 500</div>
I want a handle to the div object so I can show the user how many more letters they can type by updating the text.
Using this:
$("div")
returns a list of all divs on the page. I can see the target div in the list, but I can't get jquery to return a single object.
I know it can also be done with something like this:
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
if( /^Remaining letters/.test(divs[i].innerText) )
divs[i].id = "kudosMsgNote"
}
}
but I was hoping to complete this with a cleaner looking solution involving jquery. I also simply want to know how to do it with jquery, aesthetics not withstanding.
Use a class selector.
var theDivViaTheClass = $(".dhxform_note");
Class Selector (“.class”)
Description: Selects all elements with the given class.
version added: 1.0
jQuery( ".class" )
class: A class to search for. An
element can have multiple classes; only one of them must match.
For class selectors, jQuery uses JavaScript's native
getElementsByClassName() function if the browser supports it.
You seem to be targeting the <div> by its text. Try using the :contains selector:
$("div").filter(':contains("Remaining letters")').first().attr("id", "kudosMsgNote");
The .first() is to make sure you don't set the same id for multiple elements, in case multiple elements contain the text "Remaining letters".
Here's the docs for the :contains selector: http://api.jquery.com/contains-selector/
Be careful, the text you're looking for is case sensitive when using :contains!
Is that div the only one with the class dhxform_note? If so, you can use the class selector:
$('.dhxform_note').html();
With jQuery, you can specify any css selector to get at the div:
$(".dhxform_note").attr("id", "kudosMsgNote");
will get you this element as well.
Selecting on inner text can be a bit dicey, so I might recommend that if you have control over the rendering of that HTML element, you instead render it like this:
<div name="remainingLetters" class="dhxform_note" style="width: 300px">Remaining Letters: 500</div>
And get it like this:
$("[name=remainingLetters]").attr("id", "kudosMsgNote");
However, it's possible that you really need to select this based on the inner text. In that case, you'll need to do the following:
$("div").each(function() {
if ( /^Remaining letters/.test($(this).html()) ) {
$(this).attr("id", "kudosMsgNote");
}
});
If you cannot set id for whatever reason, I will assume you cannot set class either. Maybe you also don't have the exclusive list of classes there could be. If all those assumptions really apply, then you can consider down your path, otherwise please use class selector.
With that said:
$("div").filter(function() {
return /^Remaining letters/.test($(this).text())
}).attr('id', 'id of your choice');
For situations where there are multiple divs with the class dhxform_note and where you do not know the exact location of said div:
$("div.dhxform_note").each(function(){
var text = $(this).text();
if(/^Remaining letters/.test(text)){
$(this).attr("id", "kudosMsgNote");
}
});
EXAMPLE
If, however, you know that the div will always be the 2nd occurrence of dhxform_note then you can do the following:
$("div.dhxform_note").get(1).id = "kudosMsgNote";
EXAMPLE
Or do a contains search:
$("div.dhxform_note:contains('Remaining letters')").first().attr("id", "kudosMsgNote");
EXAMPLE
var body = 'Alex, Jason, Kate, how are you?";
I want to use JQuery to remove the anchor element from body, and then also remove the comma after the anchor, if there is any. Note: to make it easy, the comma will always be after the anchor with no other characters in between.
I'm assuming (to maintain grammatical consistency) that you also want to remove the contents of the anchor.
Firstly, use a regexp to get rid of the comma:
var body = 'Alex, Jason, Kate, how are you?';
body = body.replace(/(<\/a>),/g, '$1')
Then to allow jQuery to work on the string you need to enclose it in an element:
body = '<div>' + body + '</div>'
Then you can actually remove the element
body = $(body).children('a').remove().end().html();
NB: the code above will remove all <a> elements within the text, but leave other HTML elements therein untouched.
If you're thinking of removing elements like that then it would be better to encase them in something to "mark them off" as it were. You're saying that the name "Jason" is tied to the superseding comma, so mark them off. e.g.:
var body = 'Alex, <span class="name">Jason,</span> Kate, how are you?";
Then to remove in jquery you can do something like:
$('a').click(function(){ $(this).closest('.name').remove(); });
This is the best way to do it, mainly because you have control over what is important to which text elements. A regex, or some way of removing the next single character will work in your example, however what happens if you want to extend your sentence, eg: 'Alex, Jason (the farmer's son), Kate, how are you?'.
This should be basic, but for some reason its not working for me. I just want to store the id when a link that has a certain class is clicked in a variable so as an example:
Some link
I would want jquery to get the id of the link above and store it in a variable. I have tried $this.attr("id") and $this.id, but non of this worked.
This is what I have for the jquery:
$(".only_this_class").click(function() {
var clickedId= $(this).attr("id");
alert(clickedId);
});
I just get "undefined" every time.
I removed the space between this and _class in class="only_this _class" and it is working for me.
Try this here
Please have a look at jQuery Selectors
If you have two classes in your HTML then the syntax is different:
$('.classA.classB')
Have a look at How can I select an element with multiple classes?
NAVEED is right, if you remove the space it works, because if there is a space HTML will put two classes on the element: only_this and _class.
If you are in fact looking for two different classes, you should replace the space with a dot to make it work properly, as in $(".only_this._class")
$(".only_this _class") this selector will look for _class tag in .only_this element. May you are looking for $(".only_this") which will select element which has this class. Try this.
$(".only_this").click(function() {
var clickedId= $(this).attr("id");
alert(clickedId);
});
I have a few links that look like this:
...
How can I bind a function to all elements that have a class that starts with "rotate-" ?
You can use starts with selector like this:
$('a[class^="rotate-"]')
Description: Selects elements that
have the specified attribute with a
value beginning exactly with a given
string.
So your code should be:
$('a[class^="rotate-"]').click(function(){
// do stuff
});
Note: If you want to find out elements that contain certain text anywhere in their attributes, you should do this instead:
$('a[class*="rotate-"]').click(function(){
// do stuff
});