jQuery显示car_orig if $(this).attr(.class)=="car“
jQuery显示car_orig if $(this).attr(.class)=="car“
提问于 2012-01-17 13:11:28
我有li.box，li.car，它在包含修改值的$(this)中，然后有box_orig，car_orig，包含原始列表.
如何用原始列表替换$(this)的数据(html数据，li的内容)，所以如果$(this)包含li.box，那么我需要用box_orig的数据替换它。
编辑：
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
}
});重新编辑：重新编辑：
我意识到替换数据会破坏任何东西，所以替换是不可能的，只需显示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和text)。
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-01-25 20:09:46
解决方案：
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);
}
}
...Stack Overflow用户
发布于 2012-01-21 20:32:49
不太清楚你在问什么。要替换该类中的整个对象吗?每个列表项？或者仅仅是它的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()]);
}
});此示例只需向列表项添加一个ID，并将每个列表项中的这个、类和原始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]);
}
}
});编辑： Ok，所以您希望用原始列表数据替换数据。下面是一个使用编辑中的新代码的示例：
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语句来检查类。在这里，我们隐藏当前列表，接受它的类并构造原始列表的类或id，并显示原始列表。
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));
}Stack Overflow用户
发布于 2012-01-24 05:12:20
我不太清楚你到底在做什么，但让我试试:)我列出了两个列表，一个是原始的，另一个是带有“修改”信息的：
<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'));
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8895169
复制相关文章
相似问题
腾讯云开发者
