This question is the continuation of I created textarea expander from script but after, it doesn't expands
Because i create a table with the textarea and i want call the plugin textarea.
Calling after the appendTo with jQuery("textarea[class*=expand]").TextAreaExpander();
I searching all the textarea with class="expand" and working.
How to edit this sentence for working only one div's interest?
Assuming your structure is like this:
<div id="parent">
<textarea class="expand"></textarea>
</div>
You can simply do this:
$('#parent > textarea[class*=expand]');
> is the child selector and #idselects the element with the given id.
Edit
As #VijayVerma stated in the comments: If your <div> doesn't have an ID yet, just add the ID to the textarea instead:
<textarea id="onlyme" class="expand"></textarea>
And select it with the ID-selector only:
$('#onlyme');
If your <div>s already have IDs, you're fine with the first solution I've posted.
give the div an id..let say
<div id="YourId"><textarea>..</textarea></div>
jQuery("#YourID > textarea[class*=expand]").TextAreaExpander();
Related
I want to remove/hide the element inside the parent in specific range. Is that possible in jquery?
<body class="page page-id-5269 page-parent page-template-default logged-in kleo-navbar-fixed navbar-resize js" itemtype="http://schema.org/WebPage" itemscope="">
<p>Your account is not setup as a vendor.</p>
<form action="" method="POST">
//....
</form>
<br class="clear" style="display: none;">
//other element here that should be display ...
</body>
on the code above i want to remove element inside the body tags but until in <br class="clear"> only. The element that i want to remove is dynamically generated it can be div, p, span, etc...
Currently i have code like this but it will remove only the specific element (not dynamicaly):
$('body.page div').first().hide();
Please help. Thank you!
That is you want to hide all the previous siblings of br.clear element which is a child of body.page so
$('body.page > br.clear:first').prevAll().hide();
This might be solution:
$('body.page').find('*').each(function(){ //iterating all children
$(this).hide();// removing elment
if($(this).is( "br.clear" ))//checking element is br having class clear
return false;// breaking loop
});
See DEMO: Instead of using body i have used div.container.
I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.
Try:
$("#region_North_America").append(row_str);
using append().
Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.
Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);
I have this :
<div class="div1">
<div class="div2">
<div class="div3">
<div>
<input></input>
</div>
<input></input>
</div>
</div>
</div>
I want to get the input tag with JQuery and use Css.
I tried this :
$('.div1 :input').css('background-color','blue');
but it doesn't work.
The problem is that there is an other input tag?
Edit :
Sorry for not having detailed.
I use a Date Control Form from Nintex and his input tag already has css by default. Problem solved!
As you have updated, via comment, that you just want the first input, use either the first() method on the search result, or use the :first selector. Examples of both below:
$('.div1 :input').first().css('background-color','blue');
http://jsfiddle.net/TrueBlueAussie/3LftU/2/
or
$('.div1 :input:first').css('background-color','blue');
http://jsfiddle.net/TrueBlueAussie/3LftU/3/
As you mentioned in your comment that a plugin has an input field whose css you want to change which already is their, you can do something like this
$('.div1 :input').style('background-color','blue','important');
Good Day.
Actually it is the wordpress site but i need the general solution using jquery(if feasible)
I trying to remove the tag next to end of the div.
See I am using the div as like here
<div class="one_third">
<p>This is for testing</p>
</div>
<br> <!--This one -->
<div class="one_third">
</div>
<br><!--This one -->
<div class="one_third">
</div>
<br><!--This one -->
In the above example i am using the class of one_third in a div inside this div i am using br tag too. But all i am want to remove the br tag which is in outside the div i mean in the end of the div in jquery.
</div>
<br>
I am not sure how to do this in jquery (Actually i try with wordpress disable wpautop is removing the br tag which is inside the div too (I don't want to remove the br tag inside the div only outside the div i mean end of the div )).
Any suggestion would be great :)
Thanks,
vicky
You should just place the HTML on one line.
wpautop inserts <br> on newlines, so placing the HTML code on one line avoids the entire issue.
<div class="one_third"><p>This is for testing</p></div><div class="one_third"></div><div class="one_third"></div>
The way you structure the markup is everything when wpautop is enabled.
It is the next sibling of the element with class one_third
$('.one_third').next('br').remove()
Demo: Fiddle
A non JavaScript solution would be a simple CSS sibling selector
.one_third + br {
display : none;
}
If you really want to use jQuery, you can use the same selector and use remove()
$(".one_third + br").remove();
You can use next() and remove() methods in jQuery for that
$(".one_third").next('br').remove();
I'm trying to select the text from the name attribute of the anchor element of the last Comment div in the Comments div (i.e. comment_3037) How can I select it?
Here's my html:
<div id="Comments">
<div class="Comment"><!-- last "Comment" element in the div -->
<a name="comment_3037"></a>
<img src="">
<div>
<div class="Stats">Some info goes here</div>
<div class="Body">Comment goes here.</div>
</div>
</div>
</div>
Corrected Version
(dojo.query always returns a nodelist)
This would look something like that:
var nodelist = dojo.query('#Comments > .Comment:last-child > a[name]);'
var value = dojo.attr(nodelist.at(0), 'name');
Explanation: #Comments > .Comment selects all nodes with class Comment inside the node with id Comments. :lastChild reduces this selection to the last child. > a[name] selects all immidiate children of type a with the attribute name.
The second line just gets the value from the name attribute of the node.
You should get the correct element with that, but I haven't tested it.
Have a look at the dojo reference, there are tons of useful functions.
(I don't work at dojo, I just really like it ;) )
Info
http://docs.dojocampus.org/dojo/query
EDIT
To make sure that you get only the node you want (if you add another link with a name attr), you could add a class "thisisthelinkiwant" (or similar ;) ) to the appropiate link and updating the query to 'Comments .thisisthelinkiwant:last-child'.
You might consider reading about css selectors, as they are quite important with this function.