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>
Related
I have made a table to display a list of child pages in sightly. I want to work on pagination in the list. This is my slightly code snippet. I have tried different approches but still no success. I am new to javascript so I am facing issues in finding the best approach.Can please help me with the correct way to achieve this.
<tfoot>
<tr class="footable-paging">
<td colspan="5">
<div class="footable-pagination-wrapper">
<ul class="pagination" id="demo">
<li class="footable-page-nav disabled" data-page="first" aria-label="first page">
<a class="footable-page-link" href="${request.requestURL.toString}">«</a>
</li>
<li class="footable-page-nav disabled" data-page="prev" aria-label="previous" id="prev-page">
<a class="footable-page-link" href="${request.requestURL.toString}">‹</a>
</li>
<li class="footable-page visible active" data-page="1" aria-label="page 1">
<a class="footable-page-link" href="${request.requestURL.toString}">1</a>
</li>
<li class="footable-page visible" data-page="2" aria-label="page 2">
<a class="footable-page-link" href="${request.requestURL.toString}">2</a>
</li>
<li class="footable-page-nav" data-page="next" aria-label="next" id="next-page">
<a class="footable-page-link" href="${request.requestURL.toString}">›</a>
</li>
<li class="footable-page-nav" data-page="last" aria-label="last page">
<a class="footable-page-link" href="${request.requestURL.toString}">»</a>
</li>
</ul>
<div class="divider"></div>
<span class="label label-default"></span>
</div>
</td>
</tr>
</tfoot>
<tbody id="body">
<tr class="ninja_table_row_0 nt_row_id_157" id="tr" data-sly-repeat.child="${currentPage.listChildren}">
<td class="ninja_column_0 ninja_clmn_nm_logoname footable-first-visible" style="display: table-cell;">
<a href="${child.getProperties['path']}.html">
<img src="${child.getProperties['logo']}" alt="${child.getProperties['company']}">
</a>
</td>
<td class="ninja_column_1 ninja_clmn_nm_company" style="display: table-cell;">
${child.getProperties['company']}
</td>
<td class="ninja_column_2 ninja_clmn_nm_boothno" style="display: table-cell;">${child.getProperties['boothNo']}</td>
<td class="ninja_column_3 ninja_clmn_nm_country" style="display: table-cell;">${child.getProperties['country']}</td>
<td class="ninja_column_4 ninja_clmn_nm_profile footable-last-visible" style="display: table-cell;">${child.getProperties['profile']}</td>
</tr>
</tbody>
HTL/Sightly has iteration control for some time already, see the data-sly-repeat spec:
<!--/* Iteration control; start from the beginning, stop after the first 10 elements (index 9) */-->
<div data-sly-repeat.article="${articlesCollection # begin = 0, end = 9}" id="${article.id}">${article.excerpt}</div>
You can use that in conjunction with URL parameters to set the begin and end of your list page.
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 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
I have a vertically divided page, down the middle. On one side I have a list of restaurants, I would like when/if a name of a restaurant is clicked on, an image of the restaurant and a description appears inside a div that is on the other side of the divided page.
I am trying to do this with jQuery and have it so when there is a click event the id of the name clicked is stored in a variable and then that variable corresponds to a picture which will then be displayed in the div.
I am sure there is simpler way to do this, and I am drawing a blank on this, or if someone could help me in doing it in the way I am trying, it would be greatly appreciated. All insight is welcomed and thank you.
This is new to me. I know i could do it by going through each id and having its own function call but I am trying to be less repetitive and have a function that works for all. thanks
JS CODE :
$('.hover').click( function(){
var iD = $(this).attr(id);
$('.pictureofeats').removeAttr("id");
$('.pictureofeats').attr('id', iD);
});
HTML CODE :
<div class="row drinks brunchpic">
<img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li>
<br>
<li class="hover" id="716">716 (Food and Sports)</li>
<br>
<li class="hover" id="bdb">Big Ditch Brewing</li>
<br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li>
<br>
<li class="hover" id="lloyds">Lloyds</li>
<br>
<li class="hover" id="abv">Allen Burger Venture</li>
<br>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" id="foodInfo">
<div class="row">
<div class="pictureofeats" id="foodImg"></div>
</div>
</div>
Store the required classname in the data-id attribute for the restaurant name
and toggle the display for the images keeping the positioned as absolute
JS Fiddle
Structure your HTML as following:
<div class="parent">
<div class="a">
<div class="img1 active">
1
</div>
<div class="img2">
2
</div>
<div class="img3">
3
</div>
</div>
<div class="b">
<div data-id="img1">abc</div>
<div data-id="img2">def</div>
<div data-id="img3">ghi</div>
</div>
</div>
CSS:
.parent {
width: 100%;
}
.a,.b {
display: inline-block;
min-width: 48%;
}
.img1,.img2,.img3 {
position: absolute;
display: none;
}
.active {
display: block;
}
JS:
$('.b div').click(function() {
var x = $(this).data('id');
$('.a div').removeClass('active');
$('div.' + x).addClass('active');
})
try something like this:
<div id="restId" class="row drinks brunchpic"><img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li><br>
<li class="hover" id="716">716 (Food and Sports)</li><br>
<li class="hover" id="bdb">Big Ditch Brewing</li><br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li><br>
<li class="hover" id="lloyds">Lloyds</li><br>
<li class="hover" id="abv">Allen Burger Venture</li><br>
</ul>
</div>
</div>
</div>
and in javascript:
$('#restId').click( function(){
$('#restId img').attr('src', newSource);
});
I think this is the logic
I want to display a different image in JSP on clicking a different links in the same JSP.
Can any one please help me in displaying image with respect to the DIV id.
here are my links bellow
<table class="contentTable" cellspacing=1 cellpadding=0 border=0 >
<tr class="altRow1">
<th class="fieldName" nowrap="nowrap" align="center" colspan="<%=metricCols %>">Business statistics </th>
</tr>
<tr>
<div class="greyBorderBox bottomSpacer10">
<ul class="noBullet" >
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app1(this.id);" id="id_1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app2(this.id);" id="id_2">link2</a></li>
</ul></td></tr>
below are the two DIV parts to be displayed
<tr class="altRow1">
<!-- if link1 is clicked this part should be displayed -->
<%if(bus.exists())){ %>
<div id="id1"> <td class="fieldName" style="vertical-align:top;" id="id1">
<img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img>
</td></div>
<!-- if link2 is clicked this part should be displayed -->
<% }else { %>
<div id="id2"><td class="fieldName" style="vertical-align:top;">
<img height="240px" src= "C:\Users\Desktop\Capture.GIF" style="align:'center';" ></img>
</td>
<%
}
</div> </tr>
Put user defined attribute inside link and send only this param as a references like so :
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_1" data-target="id1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_2" data-target="id2">link2</a></li>
One more thing, id should be unique(remove id="id1" inside img tag), change into this :
<div id="id1" style="display:none">
<td class="fieldName" style="vertical-align:top;" >
<a href="C:\Users\Desktop\graph.GIF" target="_blank"><img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img>
</a>
</td>
</div>
For initial state, just hidden those two div using style="display:none", see above code. Same applied for second div.
And JS would be :
<script>
function show_app(e){
var target = $(e).data('target');
$('#'+target).toggle();
// ... another rest of code
}
</script>
In HTML, you can try like this: Demo
Added #id1, #id2 in href of <a> and used those id's for <div>
<ul class="noBullet" >
<li class="nav-off" ><a class="headerNav-myworkspace" href="#id1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#id2">link2</a></li>
</ul>
<div id="id1">test 1 </div>
<div id="id2">test 2 </div>