Что отличает нижеследующий код Jquery?

Question

Я работаю над созданием одного из сайтов социальных сетей, в котором есть некоторые функции уведомлений на левой панели. Всякий раз, когда какой-либо пользователь играет в игру, он автоматически изменит количество уведомлений.

Для этого я использую строку кода ниже.

jQuery('#count_id').load('mypage.php');

Но он получит весь контент сайта с заголовком, нижним колонтитулом и областью контента в тексте ответа, что не соответствует моим требованиям.

но если я использовал ниже код строки

jQuery('#count_id').load('mypage.php #count_id');

тогда он вернет мне реальный счет, но добавит еще один div между оригиналами,

Оригинальный HTML:

<div id="count_id" class="notify">2</div>

и код после получения ответа:

<div id="count_id" class="notify">
 <div id="count_id" class="notify">1</div>
</div>

что тоже не так, как ожидалось. количество верное, но я не хочу добавлять новый div в исходный.

Что мне нужно изменить в моем коде?

Спасибо.

Answer 1

jQuery('#count_id').load('mypage.php #count_id > *');

Это принесло бы только DOM childs (содержимое)

Answer 2

Потому что это так. Также он позволяет вам присоединять события к загружаемому элементу и делегировать их внутри этого элемента (чтобы новые элементы также могли получать выгоду от вложенных событий JavaScript) - см. .delegate().

Если вы хотите заменить элемент, вы можете попробовать следующее:

jQuery.get('mypage.php', function(data){
    jQuery('#count_id').replace(jQuery(data).find('#count_id'));
}, 'html');

Я не проверял, но он должен работать.

Однако Иван Кастелланос прав. Согласно документации, вы можете указать любой селектор после первого пробела в параметре .load().

Answer 3

Чтобы получить count_id, вы можете напрямую получить значение html в div следующим образом:

    <script type='text/javascript'>
    jQuery(document).ready(function() 
    {
        countVal = $("#count_id").html(); //returns the html content inside the div, which is the count value
        countVal = parseInt(countVal); //This will convert the string to type integer
    });
    </script>

Примечание: Если вы хотите увеличить количество и обновить значение div, вы можете добавить следующие строки:

countVal++;
$("#count_id").html(countVal);