I am trying to access curr-dish and sub-dish class using jquery of third dish-wrapper div class...
how to access it since all three divs have same class
i want to access only third div...
i dont want to add any ids to the div..
providing my code below
<span class="status">
<div class="dish-wrapper">
<ul class="dishations">
<li class="curr-li">
<div class="curr-div">
<a class="curr-dish sub-dish" "></a>
</div>
<ul class="dish-ul">
</li>
</ul>
</div>
<div class="dish-wrapper">
<ul class="dishations">
<li class="curr-li">
<div class="curr-div">
<a class="curr-dish sub-dish" "></a>
</div>
<ul class="dish-ul">
</li>
</ul>
</div>
<div class="dish-wrapper">
<ul class="dishations">
<li class="curr-li">
<div class="curr-div">
<a class="curr-dish sub-dish" "></a>
</div>
<ul class="dish-ul">
</li>
</ul>
</div>
</span>
you can
$('.dish-wrapper:eq(2) .curr-dish.sub-dish')
You can use :eq to get element at particular location the and combine classes using dot .
$('.dish-wrapper:eq(2)').find(' curr-dish.sub-dish');
To access the last element you can use :last or .last()
$('.dish-wrapper:last').find(' curr-dish.sub-dish');
Using :eq() is best way to access the third element like what others said. To access the curr-div and curr-dish sub-dish seperately, use can use the following:
$('.dish-wrapper:eq(2)').find('.curr-div');
$('.dish-wrapper:eq(2)').find('.sub-dish');
or collectively:
$('.dish-wrapper:eq(2)').find('.sub-dish,.curr-div');
NOTE: Please specify the class name without spaces so that it helps to access it in jquery/javascript. Ex. Here "curr-dish sub-dish" class name is not allowing to search for the class name precisely, able to check only the last part of the class name.
Good Luck!
Related
I have a demo application here and in the upper left corners of the "tweets" there are dots and I have no idea where they come from. The code is written in Ember and the template looks like this
<h2>Ember.js DEMO Tweet list</h2>
<div class="tweets-list">
<h2>Tweets</h2>
<button {{action 'changeAllTweets'}}>Change All Tweets</button>
<button {{action 'changeOneTweet'}}>Change One Tweet</button>
<div class="row input-wrap">
</div>
{{#each this.model.topTweets as |model|}}
<li class="media">
<div {{action 'bindNewModel' this}} class="row">
<a class="pull-left" href="#"><img class="media-object" width="75" height="75" src={{model.avatar}}/></a>
<div class="media-body">
<h4 class="media-heading">{{model.favorites}}</h4>
<p>{{model.text}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
Expand
</div>
<div class="col-xs-8">
<ul class="list-inline text-right">
<li href="#">Reply</li>
<li href="#">Retweet</li>
<li href="#">Favorite</li>
<li href="#">More</li>
</ul>
</div>
</div>
</li>
{{/each}}
</div>
P.S. The SHOW LIST button must be pressed for the list to show
It's because you're using list items, i.e. <li> tags. They're shown with bullet points by default.
First of all, you should only use <li> tags inside an ordered or unordered list (<ol> / <ul>). You should consider if list items are appropriate here. Maybe <div>s are more suitable?
If you want to use list items you should wrap them in a <ul> list and then get rid of the bullet points by applying the styling: list-style-type: none.
Changing the display style of the list item will also get rid of the bullet point.
These are the list item markers. Add list-style:none; to the ul, and they will disappear.
Edit: I see that you are also missing the ul itself. The wrapping ul does not exist. These are just list items. Add the opening ul before the each statement and closing after it. And in case the list style none rule.
I'm on mobile and can't edit the fiddle.
There is HTML structural error.
Wrap the <li class="media"> with an <ul> tag. I can assume you are using Bootstrap. If yes then wrap the <li> tag with <ul class="list-group"> and add list-group-item class to the <li> tag like this: <li class="media list-group-item">
I have one ul li list and I want to put that content between ..
What I have
<div id='a'>
<ul>
<li>
<li>
<li>
</ul>
</div>
what I want to do is that using jquery I want to add div before and after this content like this
What I want
<div id='a'>
<div id='b'>
<ul>
<li>
<li>
<li>
</ul>
</div>
</div>
What I am using is append or before but not getting properly result.
I used following code.
$("#a").prepend("<div id='b'>");
$("#a").append("</div>");
But I got result like this.
<div id='a'>
<div id='b'></div>
<ul>
<li>
<li>
<li>
</ul>
</div>
please help me.
You can use .wrap() to do this:
$("ul").wrap("<div id='b'></div>");
Demo Fiddle
Use wrap()
This will exactly do what you want:
$("#a > ul").wrap("<div id='b'></div>");
Look at the doc: http://api.jquery.com/wrap/
Try this
$("ul").wrap("<div id='b'></div>"); and here is the working example
<ul id="component-list" class="no-left-margin">
<li class="component-items hide">
<span>Login</span>
<a href="#">
<i class="icon-remove"></i>
</a>
</li>
<li class="component-items">
<span>Register</span>
<a href="#">
<i class="icon-remove"></i>
</a>
</li>
</ul>
I'm trying to get a list of items that are visible (span tags inside li tags without the hide class)
$('.component-items span').not('.hide');
The above selector is giving me an empty array.
I need the selector to give me the span tags within <li> without the hide class.
$('.component-items').not('.hide').find('span');
$('.component-items:visible span')
http://api.jquery.com/visible-selector/
Cheers!
I like to use css pseudo class :not().
$(".component-items").find("span:not(.hide)")
Hope it helps you
I want to have a custom button to appear on the right side of my list view header named 'Click Me', which will perform an action via the 'on click' event. As far as I know JQuery does not have a standard way to achieve this but perhaps you know how to achieve this.
As an illustration to what I want to achieve, take a look at http://jquerymobile.com/test/docs/buttons/buttons-icons.html.
Imagine now that you are looking at list headers where the data icon is on the right side and instead of it being an icon it says 'Click Me'. Furthermore, the List Header cannot be clickable like its elements, instead the data icon must be the only clickable element in here.
Please let me know if you have any ideas, even if this is simply impossible to achieve due to JQuery, thanks!
This is what I was looking for:
<ul data-role="listview">
<li data-role="list-divider">
Fruits
<span class="ui-li-count">
<a href="#" data-role="none" data-theme="b">
Button
</a>
</span>
</li>
<li>Apples</li>
<li>Grapes</li>
<li>Others</li>
</ul>
Note that the list divider contains a SPAN which acts as a button... quite ingenious :)
Anyways, thanks for your help!
You are looking for a Split Button list
This is an example you can put two icon buttons inside:
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Opciones de platillo</li>
<li><a href="#" >Notas</a></li>
<li>
Tiempo
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>
Comensal
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>Modificadores</li>
<li>Terminadores</li>
<ul>
</div>
I have this HTML:
<li name="services">
<h1>Services</h1>
<p>text</p>
</li>
<li name="about">
<h1>About</h1>
<p>text</p>
</li>
<li name="portfolio">
<h1>Portfolio</h1>
<p>text</p>
</li>
<li name="team">
<h1>Team</h1>
<p>text</p>
</li>
<li name="process">
<h1>Process</h1>
<p>text</p>
</li>
<li name="packages">
<h1>Packages</h1>
<p>text</p>
</li>
</div>
This HTML is relatively position on the page. When I try to direct the page to '#services' it does absolutely nothing. It just loads the page again. I am assuming the problem is that they are relatively positioned. Is there any way to make this work?
When I try to direct the page to '#services' it does absolutely nothing. It just loads the page again
I don't think relative positioning is the problem. The fragment identifier (hash) takes you to an element with the id value matching the hash, or the a name= element with the name equal to the tag (note that that's an anchor, an a tag, not just any tag). Your li tag doesn't match either of those criteria. (In fact, I don't believe that li elements are allowed to have a name attribute.)
If this structure is unique on the page, try changing
<li name="services">
to
<li id="services">
Live example
For years it was a well-kept secret (I certainly didn't know about it for years), but it was covered in the HTML 4.10 spec.
You need to use an anchor <a> tag:
<a name="services"></a>
You should create an a tag with a name element - you can't just attach name to any tag
<li><a name="packages"></a>
<h1>Packages</h1>
<p>text</p>
</li>