簡體   English   中英

jQuery語法未設置對象屬性

[英]jQuery syntax not setting object property

我相信的jQuery問題非常簡單,這使我發瘋,我無法理解。

我有一個帶有“內容”屬性的對象,我希望能夠使用該對象,用jQuery處理“內容”屬性,然后用jQuery創建的新值覆蓋該值。

例:

o.content = "<div><span>hello</span></div>";
$('div', o.content).addClass('test');

在這一點上,我希望o.content等於<div class='test'><span>hello</span></div>

我無法為自己的生活弄清楚語法。 任何幫助都非常感謝。

解析o.content的html,添加類,將解析的html附加到新的<div> ,並獲取新div的html:

o.content = "<div><span>hello</span></div>";
var el = $(o.content).addClass('test');
o.content = $("<div>").append(el).html();

編輯:這假設您希望o.content仍然包含字符串,而不是jQuery對象。 在這種情況下,它更簡單:

o.content = $(o.content).addClass('test');

如果需要的話,這將為您提供一個字符串<div class="test"><span>hello</span></div>

$(o.content).addClass('test').wrap('<div>').parent().html();

我認為您無法從這樣的字符串中查找元素。我寧願像下面這樣,

var content = "<span>hello</span>";
content = $('<div/>', {class: 'test'}).html(content)

演示: http : //jsfiddle.net/k4e5z/

jquery函數文檔中context必須是

用作上下文的DOM元素,文檔或jQuery

您的上下文( o.content )是一個字符串。 另外,jQuery函數無法選擇整個上下文,它只能選擇該上下文中的元素。

嘗試以下方法:

// make o.content a jquery element, not a string
o.content = $("<div><span>hello</span></div>");

// select on something inside the context (inside the div), not the div itself
$('span', o.content).addClass('test');

http://jsfiddle.net/JfW4Q/

您需要以下內容

o.content = "<div><span>hello</span></div>";
// Create a jQuery object you can call addClass on
var docFragment = $(o.content);
docFragment.addClass('test');
// Since there's no outerHTML in jQuery, append it to another node
var wrapper = $('div');
docFragment.appendTo(wrapper);
// The HTML of the wrapper is the outerHTML of docFragment
console.log(wrapper.html()); // outputs <div class='test'><span>hello</span></div>

為什么不在一行中做所有事情:

var o = {};
o.content = $( "<div></div>" )     // create element
    .addClass('test')              // add class
    .html( '<span>hello</span>' ); // append content

小提琴: http : //jsfiddle.net/kboucher/eQmar/

o.content = $("<div><span>hello</span></div>");
o.content.addClass('test');

o.content在此示例中是一個jQuery對象,而不是一個字符串。 這是jsfiddle上的演示: http : //jsfiddle.net/cvbsm/1/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM