jQuery покажет car_orig, если $ (this) .attr (.class) == "car" - PullRequest
1 голос
/ 17 января 2012

У меня есть li.box, li.car, которые находятся внутри $(this), которые содержат измененные значения, а затем у меня есть box_orig, car_orig, содержащий исходные списки ...

как я могу заменить данные $(this) (html-данные, содержимое li) исходным списком, поэтому, если $(this) содержит li.box, мне нужно заменить его данными box_orig

Edit:

var list              =   $("ul#list");

var box_orig    = list.children('.box');
var car_orig    = list.children('.car');

А $(this)

 $('#list li').each(function () {
     if ($.inArray($(this).attr('class'), show) == 0) {
         console.log($(this)); //-> Returns li.box / car or whatever list was selected
     }
 });

Re-редактирование: Re-Re-редактирования:

Я понял, что замена данных что-то нарушает, поэтому замена не может быть и речи, просто вместо этого укажите car / box_orig li.car/box

                $('#list li').each(
                function(){
                    //alert($.inArray($(this).attr('class'),show) );
                    if ($.inArray($(this).attr('class'),show) == 0)
                    {
                        if($(this).attr('class') == 'box')
                        {
                             --> show box_orig, which contains lis with info BUT DO NOT REPLACE THE DATA, just show the box_orig instead of $(this) = li.box
                        }
                        if($(this).attr('class') == 'car')
                        {
                             --> show car_orig, which contains lis with info BUT DO NOT REPLACE THE DATA, just show the box_orig instead of $(this) = li.car
                        }
                        console.log($(this));
                    }

HTML:

jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)

и каждый li.car содержит данные (img и текст)

Ответы [ 4 ]

1 голос
/ 24 января 2012

Я не совсем уверен, что именно вы, но позвольте мне попробовать :) Я сделал два списка, оригинальный и один с «измененной» информацией:

<ul id='list'>
    <li class='box'>orig box1</li>
    <li class='box2'>fake box1</li>
    <li class='box'>orig box2</li>
    <li class='car'>orig car1</li>
</ul>
<hr>
<ul id='list2'>
    <li class='box'>mod box1</li>
    <li class='box2'>mod_fake box1</li>
    <li class='box'>mod box2</li>
    <li class='car'>mod car1</li>
</ul>

И применил следующий код:

var list              =   $("ul#list");
var box_orig  = list.children('.box');
var car_orig  = list.children('.car');
var counts = {'box':0, 'car':0};

$('#list2 li').each(function() {
     var el = $(this).attr('class')+'_orig';
     if (typeof (window[el]) !== 'undefined') 
     { 
       $(this).html($(window[el][counts[$(this).attr('class')]]).html());    
       counts[$(this).attr('class')]++;
     }
 }); 

Обновлен: Если вы просто пытаетесь восстановить исходные значения li в списке, этот код может быть намного проще и проще

// save data after page load
$('#list li').each(function(){  
    if ($(this).hasClass('box') || $(this).hasClass('car')) $(this).data('original', $(this).html());
})

// when data was updated use this code
$('#list li').each(function(){  /
    if ($(this).hasClass('box') || $(this).hasClass('car')) $(this).html($(this).data('original'));
})
1 голос
/ 22 января 2012

Не совсем уверен, что вы спрашиваете.Вы хотите заменить весь объект в этом классе каждым элементом списка?Или просто его HTML-контент?

Если вы просто хотите заменить его контент, вы можете сделать что-то вроде этого:

// Create the list item array + count vars
var list_orig = [];
var list1_count, list2_count = 0;

// Loop through the list items and sort html into the right arrays
// eg. list_orig[0] = [listItem class, listItem id, listItem html content];
$('#list li').each(function(index){

    if($(this).hasClass("list1")){
        list1_count++;
        var id = "list1_" + list1_count;
        $(this).attr("id", id);
        list_orig.push(["list1", id, $(this).html()]);
    }else if($(this).hasClass("list2")){
        list2_count++;
        var id = "list2_" + list2_count;
        $(this).attr("id", id);
        list_orig.push(["list2", id, $(this).html()]);
    }
});

В этом примере просто добавляется идентификатор к элементу списка и помещается этот, класс и исходный html из каждого элемента списка в массив "list_orig".

Чтобы получить доступ к данным и вернуть, например, элементы list1 обратно к их исходному содержимому, вы можете сделать что-то вроде этого:

// Example click function to revert list1 back to it's original html
$("body").click(function(){
    for(var i in list_orig){
        alert(list_orig[i][2]);
        if(list_orig[i][0] == "list1"){
            var id = "#" + list_orig[i][1];
            $(id).html(list_orig[i][2]);
        }
    }
});

РЕДАКТИРОВАТЬ: Хорошо, поэтому вы хотите заменить данные на исходные данные списка.Вот пример использования нового кода из вашего редактирования:

if ($.inArray($(this).attr('class'),show) === 0)
{
   // CREATE A TEMPORARY VAR FOR YOUR MATCHED LIST (eg. li.box)
   var x_orig = $(this).attr('class') + "_orig";
   x_orig = window[x_orig]; //USE THIS TO CONVERT THE STRING TO A VARIABLE NAME

   // CREATE A TEMPORRAY VAR FOR THE NEW CONTENT
   var content = x_orig[0]->innerHtml;

   // REPLACE THE CONTENT
   $(this).html(content);
}

Все, что я могу сделать, не видя больше вашего HTML.

ДОПОЛНИТЕЛЬНОЕ РЕДАКТИРОВАНИЕ: Вы можете простоиспользуйте одну функцию без дополнительных операторов if для проверки класса.Здесь мы скрываем текущий список, берем его класс и создаем класс или идентификатор исходного списка и показываем этот оригинальный список.

if ($.inArray($(this).attr('class'),show) == 0)
{
    // FIRST HIDE THE CURRENT LIST
    $(this).hide();

    // THEN CONSTRUCT THE ORIGINAL LIST CLASS or ID
    var x_orig = "." + $(this).attr('class') + "_orig"; // CLASS USING "."
    // var x_orig = "#" + $(this).attr('class') + "_orig"; // or ID USING "#"

    // NOW SHOW ORIGINAL USING x_orig VARIABLE FROM ABOVE
    $(x_orig).show();

    console.log($(this));
}
0 голосов
/ 26 января 2012

Решение:

var list              =   $("ul#list");

var box_orig    = list.children('.box');
var car_orig    = list.children('.car');

...
$('#list li').each(
    function(){
        //alert($.inArray($(this).attr('class'),show) );
        if ($.inArray($(this).attr('class'),show) == 0)
        {
            if($(this).attr('class') == 'box')
            {
                list.append(box_orig);
            }
            if($(this).attr('class') == 'car')
            {
                list.append(car_orig);
            }
        }
        ...
0 голосов
/ 25 января 2012

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

1) Откуда берется «оригинальный список»?Это застойный HTML, это либо объект, либо массив, извлеченный из базы данных?

2) Если таковая имеется, какую архитектуру сервера вы используете (например, PHP / MySQL)?

3)У вас есть какой-нибудь HTML-код, который мы можем видеть?

Я думаю, вы можете захотеть сделать что-то вроде:

1) Получить начальный список, заполненный результатами из базы данных MySQL.2) Иметь поле ввода текста для автомобиля и поле ввода текста для коробки.3) Попросите пользователя вставить текст в эти входные данные, затем нажмите что-нибудь, например кнопку или форму отправки.4) Замените определенные элементы в первоначальном списке информацией из входных данных.

Если вы ответите на вопросы, перечисленные выше, и предоставите немного более четкое представление о том, чего именно вы пытаетесь достичь, я уверен, что вывернусь много хороших, функциональных ответов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...