innerHTML not working properly when used on a jQuery object

问题

This code isn't working as expected. It is not showing any text inside of span.day where it should be showing today's day (Tuesday at the time of writing). It is also not properly adding the class "currentDay" inside of the $.each callback.

 $('#showLess span.day').innerHTML=weekday[today]; 

 $.each($('#showMore p span.day'), function(index, item) {  
      if(typeof item.innerHTML != 'undefined') 
      {     
           alert('item.text:' +item.innerHTML);
           alert('weekday[today]'+item.innerHTML.indexOf(weekday[today])); 

           if(item.innerHTML.indexOf(weekday[today])!=-1) { 
                alert("check which element has added class currentDay:");
                item.addClass('currentDay');
           }else{
                if(item.hasClass('currentDay')) {
                     item.removeClass('currentDay'); 
                }
           }
      } 
 });

.innerHTML is not changing the HTML, additional class is not getting added as expected.

<p id="showLess" class="less">
        <span class="day">**Tuesday**</span>
</p>

Why isn't the day showing?

Why is the show/hide not working?

$('.less').on('click', function(e) {
            $('#showMore').show();
            $('#showLess').hide();
        });

        $('.more').bind('click', function(e) {
            $('#showLess').show();
            $('#showMore').hide();
        });

回答1:

You are trying to invoke JS properties on jQuery objects.

For example innerHTML

And you are trying to invoke that on a jQuery object.

$('#showLessHours span.day').innerHTML

Should be

$('#showLessHours span.day')[0].innerHTML

$('#showLessHours span.day').html(weekday[today]);

And in your each loop item is a JS object and you are trying to add a class using jQuery. Convert that to jQuery object first .

item.addClass('currentDay');
item.removeClass('currentDay');

should be

$(item).addClass('currentDay');  or $(this).addClass('currentDay');
$(item).removeClass('currentDay'); or $(this).removeClass('currentDay')

Instead you can use the $(this) as well instead of $(item) object inside the callback as both refer to the same objects.

Another small suggestion is why do you want to mix vanilla JS and jQuery when jQuery is included and you want to use that in your application.

jsFiddle

回答2:

Because .innerHTML isn't a jquery function. You can use .html() to achieve what you are trying to do. Alternatively, if you REALLY want to use .innerHTML, you can use .get() to get the actual DOM element, and then use .innerHTML but... I wouldn't recommend it.

I believe this edited fiddle solves your problem. Relevant code:

$('#showLessHours span.day').html(weekday[today]);
//...
if(item.html() != '') {     
    alert('item.text:' +item.text());
    alert('weekday[today]'+item.text().indexOf(weekday[today]));
    if(item.html().indexOf(weekday[today])!=-1) {
//...

回答3:

In addition to what Sushanth said, you are also trying to invoke jQuery methods on javascript objects.

item.addClass

should by

$(item).addClass

来源：https://stackoverflow.com/questions/31817144/innerhtml-not-working-properly-when-used-on-a-jquery-object

标签

javascript

jquery

innerhtml