I found input value in element such as:
alert($(ui.item).find('input').val());
How can I get next li element after ui.item and find input value for it?
I tried it:
alert($(ui.item).next("li").find('input').val());
Html part:
<ul id="sortable" class="ui-sortable" style="list-style-type: none;">
<li class="ui-sortable-handle" style="">
<div id="row_attr_118_8">
<input id="attr_118_8" class="input sortInp" name="attr_118_8" value="741"
type="text">
</div>
</li>
<li class="ui-sortable-handle">
<div id="row_attr_40_8">
<input id="attr_40_8" class="input sortInp" name="attr_40_8" value="188" type="text">
</div>
</li>
<li class="ui-sortable-handle">
<li class="ui-sortable-handle">
</ul>
But it doesn't work. How can I solve this problem? Thanks.
I think you should do this:
var value = $(".ui-sortable").children("li").eq(0).find('input').val();
This selects the first li, but you can change the index in the eq to select the item you want
Related
I Have below ngFor I want to remove first four character of c.FilmCode
<li class="">
<a [(ngModel)]="selectedmovies" ngDefaultControl name="" class="form-control" (click)="togglemovies()" id="cbocmovies" [ngModelOptions]="{standalone: true}">{{selectedmoviestext}}</a>
<div [ngClass]="{toggleMovie:IsToggleMovie==true}" *ngIf="movies.length > 0">
<ul class="clearfix">
<li *ngFor="let c of movies" [value]="c.FilmCode" (click)="OnMoviesChange(c.FilmTitle,c.FilmCode)">{{c.FilmTitle}}</li>
</ul>
</div>
</li>
Below is ts code
showmoviecombo(CinemaId) {
this.common.createAPIService('api/cinemas/GetListByCinemaId?CinemaId=' + CinemaId, '').subscribe((result: any) => {
this.movies = result;
//this.movieids = this.movies.FilmCode;
console.log(this.movieids);
});
}
Is there any way to do it?
You can also use Slice for removing the first four character
<li class="">
<a [(ngModel)]="selectedmovies" ngDefaultControl name="" class="form-control" (click)="togglemovies()" id="cbocmovies" [ngModelOptions]="{standalone: true}">{{selectedmoviestext}}</a>
<div [ngClass]="{toggleMovie:IsToggleMovie==true}" *ngIf="movies.length > 0">
<ul class="clearfix">
<li *ngFor="let c of movies" [value]="c.FilmCode" (click)="OnMoviesChange(c.FilmTitle,c.FilmCode)">{{c.FilmTitle.slice(4)}}</li>
</ul>
</div>
You can use substring on your string value method
<li class="">
<a [(ngModel)]="selectedmovies" ngDefaultControl name="" class="form-control" (click)="togglemovies()" id="cbocmovies" [ngModelOptions]="{standalone: true}">{{selectedmoviestext}}</a>
<div [ngClass]="{toggleMovie:IsToggleMovie==true}" *ngIf="movies.length > 0">
<ul class="clearfix">
<li *ngFor="let c of movies" [value]="c.FilmCode" (click)="OnMoviesChange(c.FilmTitle,c.FilmCode)">{{c.FilmTitle?.substring(4)}}</li>
</ul>
</div>
</li>
I face a problem with ajax on onclick function.
In html
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
In javascript
$(document).on('click', 'li', function() {
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
$(document).on('click', 'li', function() {
$('#keyword').val($(this).text());
$('#keystatus').fadeOut();
});
Here when any li is clicked then those are fadeout and send same text value in text field. I need to identify whose li is clicked 'boo' or 'foo' and send the particular value in text field.
please help me out..
You can use .closest to find the colsest parent and then use .attr("class") to get the class name like
$("li").click(function(){
console.log($(this).closest("div").attr("class"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
Below is the code example you can put to get the class name for list item which is clicked
$(document).on('click','li',function(){
alert($(this).parent().parent().prop('class'));
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
$(document).on('click','li',function(){
alert($(this).parent().parent().prop('class'));
$('#keyword').val($(this).text());
$('#keystatus').fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
Try this in both the functions:
$(document).on('click','li',function(){
$(this).parent().parent().prop('class');
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
I'm very new at jQuery/Javascript.
I'm trying to know if to td element has more than one li element with text..
I have the follow td if has more than one li element with text.
Code sample:
<td class="tdClass"/>
<div id="div1Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
<li id="" class="rtLI rtLast">
<div class="rtMid">
<div>Text2</div>
</div>
</li>
</ul>
</div>
</td>
And the follow if i have only one li element without text:
<td class="tdClass"/>
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"> </div>
</li>
</ul>
</div>
</td>
How i can know at the simple way (jQuery/javascript) if to my td has "inner elements"?
I see thats if has element the first li item have only rtLI rtFirst class and if not rtLI rtFirst reLast but how can i know that from my code?
Thanks
I'm basing this answer on your comment
i want to know if i have only one 'li' with inner div element with empty text.
As the wording of your actual question is less clear.
There appears to be a number of ways to achieve what you're after, they all begin with having a reference to your div element. In jQuery, you select an element by Id using a # selector
var $div = $('#divId');
(Note, as a common convention you can prefix variables which relate to a jQuery object with $ to distinguish them from other variables. Not essential, but a useful convention)
From there, your element with only blank text seems to have both classes rtFirst and rtLast. So you can count the number of children with both of these classes. If that count is equal to 1, then you have that element.
if($divId.find('.rtFirst.rtLast').length === 1){
// you only have the one element with both rtFirst _and_ rtLast
}
Another way would be to count the number of children of the ul within your div
var numberofLis = $divId.children('ul').children().length;
if(numberofLis === 1){
// you only have the one element
}
And there are countless other ways to achieve the same.
Full example code with finding only those tds with more then one li:
//function search for all tds with more then one li element inside
function getAllTdsWithLiMoreThenOne(rootSelector){
return $(rootSelector).find("td").has("li").filter(function(){
return $(this).find("li").length>1;
});
}
//after document is loaded
$(function(){
//here in getAllTdsWithLiMoreThenOne("table") you get list of tds
console.log("Tds with more than one li : "+getAllTdsWithLiMoreThenOne("table").length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="td1" class="tdClass"/>
<div id="div1Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
<li id="" class="rtLI rtLast">
<div class="rtMid">
<div>Text2</div>
</div>
</li>
</ul>
</div>
</td>
<td id="td2">
<div id="div2Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
</ul>
</div>
</td>
</tr>
</table>
Function getAllTdsWithLiMoreThenOne(selector) returns collection of Jquery objects, so You have on plate all tds with more then one li inside.
PS. inserting divs in tables is not good practice.
** Please note that you can not have this <td class="tdClass"/>, it should be <td class="tdClass"> instead, without / in it because this means it's a "self-closing" tag and td tag could not be a self-closing tag, you have </td> to close it.
// loop through the tds with tdClass class
$('#theTable .tdClass').each(function() {
var $this = $(this),
matched = $this.find('.rtMid');
// if we find only one .rtMid in the td..
if (matched.length === 1) {
// and its trimmed text is empty, then we have a match
if (matched.text().trim() === '') {
//match found, your code here
$this.css({'outline': '2px solid red'});
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="theTable">
<tr>
<!-- two divs with text in them, No Match -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
<li id="" class="rtLI rtLast">
<div class="rtMid">
<div>Text2</div>
</div>
</li>
</ul>
</div>
</td>
<!-- one div with no text in it, MATCH -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"> </div>
</li>
</ul>
</div>
</td>
<!-- two divs without text in them, No Match -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"></div>
</li>
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"></div>
</li>
</ul>
</div>
</td>
<!-- one div with text in it, No Match -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid">abc</div>
</li>
</ul>
</div>
</td>
</tr>
</table>
I have object which contains question and list of choices. I'm display this object on the page using nested ng-repeats. When I'm trying to change 'question' everything changes just fine, but when I'm trying to change 'choice' nothing happens. Where is the problem?
My page:
<div class="panel">
<div class="row">
<div class="large-12 columns">
<h3>{{ title }}</h3>
<ol>
<li ng-repeat="q in quiz">
<input type="text" ng-model="q.question">
<ul class="remove-li-dots">
<li ng-model="choice" ng-repeat="choice in q.choices">
<input type="text" ng-model="choice" name="answer{{ q.id }}" >
</li>
</ul>
</br>
</li>
</ol>
<a class="button" ng-click="submitQuiz()">Submit</a><br>
{{ quiz }}
</div>
</div>
Screenshot of the page:
https://www.dropbox.com/s/i52fwq1os0cvcr9/repeat.png?dl=0
Problem is that choice is a string, so when you are changing it in child scope it is changing only in child scope.
To fix this - reference it by index in array ng-repeat="(choiceIndex,choice) in q.choices,ng-model="q.choices[choiceIndex]".
Also to prevent inputs from loosing focus when changing items - you will need to add track by $index in ng-repeat directive.
<ol>
<li ng-repeat="q in quiz">
<input type="text" ng-model="q.question">
<ul class="remove-li-dots">
<li ng-model="choice" ng-repeat="(choiceIndex,choice) in q.choices track by choiceIndex">
<input type="text" ng-model="q.choices[choiceIndex]" name="answer{{ q.id }}">
</li>
</ul>
</li>
</ol>
working example:
http://plnkr.co/edit/GJacjkzfT4FpfC6szsNk?p=preview
For better understanding how angular scopes works, I recommend reading this: https://github.com/angular/angular.js/wiki/Understanding-Scopes
Hi my full code is in jsfidlle here, i want when i will mouseover or click in "giris" my div to be appear in mouseout to dissappear , how can i do it ?
My Code :
<div class="sign_in_holder">
<div class="tab-content">
<div class="option_content tab-pane tcell-login-box active" embeddedlogin="true" id="trk-sign_in">
<form id="user_sign_in" class="sign_in js-do_login">
<ol class="steps clearfix">
<li>
<input type="text" class="text input_restrict_decimal tcell-user" maxlength="11" placeholder="GSM Numaranız" title="GSM Numaranız">
</li>
<li class="password">
<input type="password" class="text tcell-password" maxlength="15" placeholder="Turkcell Şifreniz" title="Turkcell Şifreniz">
</li>
<li>
<button type="button" id="signin_button" class="btn button-cta tcell-submit-btn">GİRİŞ YAP</button>
</li>
</ol>
</form>
</div>
</div>
</div>
<span class="dropbox_position_element carrot_up"></span></div>
<span class="dropbox_position_element carrot_up"></span></div></li>
Check This DEMO
If you want a css only solution you can use this code:
Ankit demo:
http://jsfiddle.net/6XDBE/7/
your demo:
http://jsfiddle.net/h4TMu/5/
.nav-actions:hover .dropbox{
display: block!important;
}
.dropbox:hover{
display: block!important;
}
you can see the edit at the end of the css, the important is caused by the inline dysplay:none
but in this case you need to use the parent (container) so you need to take in consideration the dimension of it.