0

我这里有这段代码：

var photo = place.photos[0].getUrl({ 'maxWidth': 50, 'maxHeight': 50 });
            var sideClick = jQuery("<a class=side_click href='#'></a>");
            $(sideClick).html(place.name+place.rating);
            $("#side_bar").append("<div class='elemenat'><div class='draggable'><img style='margin-left:3px; margin-top:5px;' src="+ photo +" width='46' height='42' /></div><div class='elementname'>").append(sideClick).append("</div></div>");
             $(sideClick).on("click", function() {
               markers[i].modalWindow_.getDetails(markers[i].place_);
             });
          }

这段代码呈现：

<div id="side_bar">
       <div class="elemenat">
            <div class="draggable ui-draggable">
                  <img style="margin-left:3px; margin-top:5px;" src="https://lh6.googleusercontent.com/-T0_fJX5zza0/UdSnOaucZvI/AAAAAAAAAFc/gQhK3IbHJfY/w50-h50-s0/Small%2BLogo.png" width="46" height="42"></div>
             <div class="elementname"></div></div>

<a class="side_click" href="#">James Cook Hotel Grand Chancellor3.6</a>

我必须如何更改 js 代码以呈现 html 将<a class="side_click" href="#">James Cook Hotel Grand Chancellor3.6</a>在哪里<div class="elementname"></div>

必须像这样呈现：

<div class="elementname">
        <a class="side_click" href="#">James Cook Hotel Grand Chancellor3.6</a>
</div>
4

3 回答 3

0

将 sideclick 附加到 elementname div，而不是side_bardiv

var element = $("<div class='elemenat'><div class='draggable'><img style='margin-left:3px; margin-top:5px;' src="+ photo +" width='46' height='42' /></div>");

var elementName = $(<div class='elementname'>);

element.append(elementName);
elementName.append(sideclick);
$("#side_bar").append(element);
于 2013-07-12T13:45:32.840 回答
0

看看http://api.jquery.com/category/manipulation/。

你有几个不同的选择。您可以更改添加内容的顺序，使用 InsertAfter 或 InsertBefore 方法，或者我个人的建议，将所有内容放到 DOM 上，然后使用 wrap() 函数将 side_click 链接与 div 一起包装。

就像是

\\append everything
$('.side_click').wrap('<div class="elementname" />');
于 2013-07-12T13:46:00.307 回答
0

不要通过原始 HTML 文本创建元素。相反，使用 jQuery 的 DOM 操作功能。它使事情更易于理解、维护并且不易出错。

因此，而不是类似的东西：

var sideClick = jQuery("<a class=side_click href='#'></a>");
$(sideClick).html(place.name + place.rating);

最好这样做：

var sideClick = $("<a>").addClass('side_click').attr('href', '#')
                        .text(place.name + place.rating);

除了更容易构建和发现错误之外，您还可以获得转义place.name + place.rating字符串的额外好处。

使用这种方法检查更新的代码（以及您预期的最终结果）：

var photo = place.photos[0].getUrl({
    'maxWidth': 50,
    'maxHeight': 50
});

var elemenatDiv = $('<div>').addClass('elemenat');
var draggableDiv = $('<div>').addClass('draggable');
var logo = $('<img>').css({'margin-left': '3px', 'margin-top': '5px'})
                     .attr('src', photo).attr('width', 46).attr('height', 42)
var sideClick = $("<a>").addClass('side_click').attr('href', '#')
                        .text(place.name + place.rating);
var elementnameDiv = $('<div>').addClass('elementname');

elemenatDiv.append(draggableDiv.append(logo));
elemenatDiv.append(elementnameDiv.append(sideClick));

$("#side_bar").append(elemenatDiv);

$(sideClick).on("click", function () {
    markers[i].modalWindow_.getDetails(markers[i].place_);
});

在此处查看演示小提琴。

于 2013-07-12T13:53:23.317 回答