Как решить дубликаты объектов в динамической загрузке страницы с помощью jQuery?

Я хочу решать дубликаты объектов в динамической загрузке контента. Пожалуйста, посмотрите на следующий исходный код для облегчения понимания.

HTML -код базовой страницы с 1 динамической загрузкой содержимого

<body>
     <div id="general-div"></div>>
     <div id="div1"></div>
     <div id="placeholder1">
          Dynamic Content will be placed inside this.

          <div class="inner-div"></div>
          <div class="div1"></div>
     </div>
</body>

Для сценария в заголовке этой страницы очень легко выбрать объект "общий-div", как показано в следующем коде.

 $('#general-div')

Это довольно просто для выбора объекта "inner-div" внутри placeholder1. Так что я могу выбрать с помощью приведенного ниже кода.

 $('.inner-div')

Приведенный выше код может работать отлично. Однако я не могу использовать приведенный выше код, если в одном документе более одного дублированного объекта, например, в следующем HTML. Приведенный выше код вернет 2 объекта, которые не соответствуют тому, что я хочу.

HTML -код базовой страницы - после загрузки другого динамического содержимого загрузки

<body>
     <div id="general-div"></div>>
     <div id="div1"></div>
     <div id="placeholder1">
          Dynamic Content will be placed inside this.

          <div class="inner-div"></div>
          <div class="div1"></div>
     </div>
     <div id="placeholder2">
          Dynamic Content will be placed inside this.

          <div class="inner-div"></div>
          <div class="div1"></div>
     </div>
</body>

Возможное решение 1

Я должен создать указанный сценарий foreach объекта jQuery в динамической загрузке содержимого, как показано в следующем коде.

 // Deep copy for jQuery object.
 var specfiedjQueryObj = $.extend(true, {}, jQuery);

 // modify find function in jQuery object.
 specfiedjQueryObj.fn.find = function(selector)
 {
      // by adding placeholder selector before eval result.
      return new specfiedjQueryObj.fn.old_find('#placeholder1 ' + selector);
 };

 // So, I can select any object in dynamic loading content.
 (function($)
 {
      // This result must be 1 object.
      $('.div1'); 
 })(temp);

Хотя это решение должно работать отлично. Но я обнаружил, что jQuery - очень сложный объект. Я нашел много ошибок, когда я пытаюсь использовать его.

У вас есть идеи для решения этой проблемы?

PS. PlaceHolder Id не является фиксированным идентификатором. Таким образом, это невозможно исправить в правиле селектора. Более того, я не знаю точно количество элементов и их положение (первое, последнее или среднее) в документе. Из-за динамической загрузки контент будет отображаться на многих страницах.

Источник

4 ответа

Решение

Следующая функция будет обрабатывать данные со страницы частичной загрузки и добавлять указанный контекст для каждого селектора jQuery в скрипте. Этот ответ хорошо работает. Однако он не поддерживает внешний файл сценария.

function renderPartialView(control, data)
{
    // For detecting all script tag in loaded data.
    var reExtractScript = /(<script type="text\/javascript">)([\s\S]+?)(<\/script>)/gi;

    // For detecting all "$" sign (must be jQuery object) in loaded data.
    var reFindDollarSign = /\$\(([\S]+?)\)/gi;

    // Find all matched string in loaded data.
    var result = reExtractScript.exec(data);
    var allScript = '';

    if (result)
    {
        for (i = 0; i < result.length; i += 4)
        {   
            // Remove current script from loaded script.        
            data = data.replace(result[i], '');

            // Replace all "$" function by adding context parameter that is control.
            allScript += result[i+2].replace(reFindDollarSign, '$($1, "' + control + '")');
        }
    }

    // Load non-script html to control.
    $(control).html(data);

    // Evaluate all script that is found in loaded data.
    eval(allScript);
}

// This script will partially download view page from server in the same domain
$(function()
{
    $.get(getUrl('~/Profile/Section/ViewEducation'), null, function(data)
    {
        // When partial loading is complete, all loaded data will be sent to “renderPartialView” function
        renderPartialView('#education-view', data);
    });
});
Источник

Вы могли бы просто использовать $('.innerdiv:first') чтобы получить первый или $('.inner-div:last') чтобы получить последний. Или, если у вас есть несколько магазинов и вы хотите выбрать конкретный $('.inner-div:nth(x)') где х - индекс предмета.

Источник

Как насчет $('div[id^=placeholder]:last')?

Селекторы / attrubuteStartsWith

Источник

Итак, давайте поговорим о вашем примере HTML. Я добавил класс заполнителя и добавил черту в id для удобства позже.

<div id="placeholder-1" class="placeholder">
     Dynamic Content will be placed inside this.

     <div class="inner-div">baz</div>
     <div class="div1">zip</div>
     <a href="#" class="action">action</a>
</div>
<div id="placeholder-2" class="placeholder">
     Dynamic Content will be placed inside this.

     <div class="inner-div">foo</div>
     <div class="div1">bar</div>
     <a href="#" class="action">action</a>
</div>

Теперь я могу привязать событие к каждой из этих ссылок с помощью $('.placeholder a.action').bind('click', ... ); Если я хочу, чтобы это событие было для всех будущих фрагментов HTML, как это на странице, я делаю $('.placeholder a.action').live('click', ... );

Этот код прикрепит событие к этим ссылкам и var операторы могут захватывать идентификатор или внутренний текст <div>s. Таким образом, у вас нет конфликтующих значений атрибута id, но вы можете проходить действия внутри divс заполнителем класса.

$('.placeholder a.action').live('click', function(){
    // get the id
    var id = $(this).parents('div.placeholder').attr('id').split('-')[1];
    // get the text inside the div with class inner-div
    var inner_div = $(this).parents('div.placeholder').children('.inner-div').text();
    // get the text inside the div with class div1
    var div1 = $(this).parents('div.placeholder').children('.div1').text();
    return false;
});
Источник
Другие вопросы по тегам