CODEWITHSUNDEEP
javascriptjquery
BernardA
BernardA

Reputation: 1523

why jquery each() not iterating?

I want to place a scroll indication on each tab which is built with Jquery UI. As it happens the code below works for the first tab and stops there. I tested and it goes just fine up till the if statement for all ul, but only the first ul passes through the if statement, even if the second ul at least also gives a true for that if

What am I missing?

Also I understand that each() will stop in case of false. How can I go around that?

var i = 0;
$(".comp_pr ul").each(function () {
    var element0 = $(this).attr('id');
    var element1 = "#" + element0;
    var element = document.querySelector(element1);
    if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
        $(element1 + ' ' + "li:nth-child(4) span:nth-child(3)").html('scroll <img id=""       src="img/forward.png" title=""/>');
        $(element1 + ' ' + "li:nth-child(4) span:nth-child(3)").attr('class', 'zscroll');
        $(element1 + ' ' + "li:nth-child(4) span:nth-child(3)").attr('id', 'zs' + i);
    }
    i++;
});

A quick summary of the HTML:

<div class="comp_pr">
<ul id="measure0">
<li></li>
......
</ul>
</div>

<div class="comp_pr>
<ul id="measure1"
<li></li>
......
</ul></div> 
....

Upvotes: 0

Views: 140

Answers (4)

BernardA
BernardA

Reputation: 1523

After Barbara Laird showed me the way I came up with the following, which is working for me, for anyones reference. Note that it needs to be on tabs activate (activate), not beforeActivate, as only after activation you can get the measures.

$(function() {
$( "#tabs" ).tabs({
activate: function(event,ui) {
var tabid = ui.newPanel.attr('id');
var i = tabid.charAt(tabid.length-1)-1;
ulid = "#measure" + i;
var element = document.querySelector(ulid);
if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
    $(ulid).find('li:nth-child(4) span:nth-child(3)').html('scroll <img src="img/forward.png" title=""/>').addClass('zscroll').attr('id', 'zs' + i);
}
}
});
});

Upvotes: 0

Neil S
Neil S

Reputation: 2304

Your code is extremely inefficient, here is the same code, improved:

$("#comp_pr ul").each(function (i) {
    if ((this.offsetHeight < this.scrollHeight) || (this.offsetWidth < this.scrollWidth)) {
        $(this).find('li:nth-child(4) span:nth-child(3)').html('scroll <img src="img/forward.png" title=""/>').addClass('zscroll').attr('id', 'zs' + i);
    }
});

Also, I'm not sure we can diagnose your actual issue without HTML markup to test against.

Upvotes: 2

Liam Allan
Liam Allan

Reputation: 1115

ids should be unique which could cause you problems, use a classname instead, also might be worth trying ++i;

Upvotes: -1

Barbara Laird
Barbara Laird

Reputation: 12717

The other tabs are hidden, right? So their Height and Width will be 0.

Upvotes: 2

Related Questions