We Keep Coding

How can I use $(.class) in an appropriate way?

I wanted to add some part of my main page with infinite scroll and it is working. But also I want to add this part of my page with an link. Normally it is work if my site name is like (https://example.com/index) but I don't want to redirect it. I want to make it work in (https://example.com) format. I think the problem is about jQuery selector.
function setupPage() {
const list = $(".list");
if (count === 0) {
list.append(
` <div> Hello</div>`);
count++;
}
setTimeout("window.location = 'index#contact'", 100);
}
<li>Contact</li>
<div class="list "> Content. </div>

You can directly set location.hash instead. Also, it is better to pass a function to setTimeout rather than a string to evaluate.
setTimeout(()=>window.location.hash = 'contact', 100);

function setupPage() {
const list = $(".list");
if (count === 0) {
list.append(
` <div> Hello</div>`);
count++;
}
setTimeout("window.location = '#contact'", 100);
}
removing index will help

If/Else statement within ng-click

I am trying to create a conditional statement within my ng-click function. I have the if working, but now I need to figure out how to get an else. I have the following code currently:
<div ng-click="item.subCategory.length > 1 && showSubCategories();">
This runs a function to display my sub-categories if there is more than 1 sub-category within a category. What I would like to do is expand on it so that I can run a different function if there is only 1 sub-category.
In Javascript the statement would look like this:
if (item.subCategory.length > 1) {
showSubCategories();
} else {
showProducts();
}
Is it possible to do that within an ng-click?

Yes. Ternary operators are available to ng-click:
<div ng-click="item.subCategory.length > 1 ? showSubCategories() : showProducts()">
That should let you do what you want.

A cleaner way to do this would be to create a wrapper function (obviously name it whatever makes sense to you). This keeps the logic in one place and also scales well (what happens when you need more checks?)
showSubCategoriesOrProducts(item) {
if (item.subCategory.length > 1) {
showSubCategories();
} else {
showProducts();
}
}
Then in the view:
<div ng-click="showSubCategoriesOrProducts(item)">

HTML:
<div ng-click="onClick(item);">
JavaScript
$scope.onClick = function(item) {
if (item.subCategory.length > 1) {
showSubCategories();
}
else {
showProducts();
}
}

I hope this will work
ng-click="item.subCategory.length > 1? showSubCategories() : showProducts()" .
here, the part before "?" is the condition. If it is true, the part after "?" i.e. showSubCategories() will execute. If the condition is false the later will be executed

How to check if any span element in inside div has empty value

I have below code in my html file
<div id="tags" style="border:none">
<span class="tag" id="spantag">{{ stu_skill.skill }}</span>
</div>
Values inside the above span will be added dynamically from the server.. there will be maximum of 7 spans (spans[0],spans[1] and so on till spans[6])
How can I check if any of the spans is empty in javascript or Jquery ?
So far, I tried the below but didn't get through
var div = document.getElementById("tags");
var spans = div.getElementsByTagName("span");
if (spans[0].innerHTML.length == 0)
{
spans[0].innerHTML=="EMPTY";
}
like this, and also
if($('spans[0]').text().length == 0){
$(".tag").text("EMPTY");
window.alert("Spans[0] has no value, it is now " + $(".tag").value);
}
I'm trying to check if there is empty span, if that is found, I need to just update it with string "EMPTY" or " "
Could you please suggest with the right approach for this ?

Voilà, jQuery has everything you need:
$(".tag:empty").text("EMPTY");
http://jsfiddle.net/DerekL/qsrrqaq7/

Try this
$("#tags tag").each(function(){
if($(this).text().length === 0) {
$(this).text("EMPTY");
}
});

Use find with :empty
$('#div').find('span:empty')

Jquery won't let me add $(this).html();

I am hoping someone smarter than me can figure this out, I feel like I am really close...
Check it out here: http://jsfiddle.net/9rjW3/4/
This is the Jquery I added
$('tr:gt(0)').each(function () {
$(this).find('td:eq(2)').html(function () {
if($('span').height() > 18)
return $(this).html().replace('#','\n#');
else
return 'this';
})
})
It works, but the only problem is I haven't figure out how to change "this" to the value of the cell...
When I try to change
return 'this';
to
return $(this).html();
It doesn't work, any suggestions?

I'd personally suggest:
$('tr + tr td:nth-child(3) span').html(function(i,h){
return $(this).height() > 18 ? h.replace(/#/g, '\n#') : h;
});
JS Fiddle demo.

you don't need $(this).html, you already have that directly available.
$('tr:gt(0)').each(function () {
$(this).find('td:eq(2)').html(function (index, html) {
if($('span').height() > 18) {
return html.replace('#', '<br />#');
} else {
return html;
}
});
});
It is correctly adding \n before #, you can see it in the debugging console. you likely instead meant to add a <br />
Update:
Your logic for wrapping after a certain height isn't going to work because the text will never wrap in a table cell unless you specifically set the width of the table cell. You'll have to either always append the break, or give that column a set width.

How to disinguish html/text button content using jquery

I need to be able to distinguish between the following three styles of button:
<button>Something</button>
<button><i class="icon-user"></i> Something</button>
<button><i class="icon-user"></i></button>
I have tried using html().length and Is('i') which allows me to distinguish between the first and the others but not sure of the best approach to determine if the content is only the icon or if there is also text.

$(this).children().length > 0 will return true in case 2 and 3.
$(this).text().length > 0 will return true in case 1 and 2.
Use those in combination.

You can do something like this. My example just changes the button background colour, but obviously you can change that to do whatever you like.
// Case 1
$('button:not(:has(i))').css('background', '#00f');
$('button:has(i)').each(function () {
var btn = $(this);
if (btn.text().length > 0) {
// Case 2
btn.css('background', '#0f0');
} else {
// Case 3
btn.css('background', '#f00');
}
});
Here's a Fiddle that shows it working: http://jsfiddle.net/SJDJD/

To check if the button has any html element(s):
$("button").each(function(i){
index = i+1;
htmlElements = $(this).find("*");
if(htmlElements.length > 0){
alert("Button no. "+index+" has an html object");
}
});