Изображение в jQuery?

Question

В моем приложении я использую список для отображения элементов. У меня есть результат веб-службы, и я связываю со списком и добавляю изображение в этот список. поэтому я использовал класс как ui-li-icon, но он приходит с перекрытием значения. см. изображение

  listItem.innerHTML = "<img class='ui-li-icon' alt='No Image' src='"+ 
g_listOfBusinessDetails[i].imageURL +"'/><a href='#' 
data-role='button' data-theme ='e' id='" + i + "' rel='external' data-inline='true'>" +
 "<h3>"+ g_listOfBusinessDetails[i].name +"</h3>"+ "</a>";

Answer 1

Предоставление img класса 'ui-li-icon' - это абсолютное позиционирование, поэтому оно перекрывает ваш текущий контент.

Переопределите это абсолютное позиционирование или переместите его в крайнее правое положение, используя 'right: 1px' или подобное. Вы также можете назначить свой собственный класс и стилизовать его вручную.

Вы плаваете тег привязки?

Answer 2

Мое решение состояло бы в том, чтобы удалить теги img, вместо этого присвоить тегу h3 имя класса на основе полученного вами ответа (или установить его фон с помощью style) и контролировать остальное с помощью css.

img не принадлежит там: -)

Answer 3

добавить стиль с полем margin-left к тексту, style = 'margin-left: некоторое значение в пикселях или em в соответствии с размером вашего изображения'

немного изменить свой код следующим образом

listItem.innerHTML = "<img src=" + g_listOfBusinessDetails[i].imageURL  + " class='ui-li-icon'></img><a href='#' data-role='button' id='" + i + "' data-theme ='c' rel='external' data-inline='true' style='margin-left:2em'  >" + g_listOfBusinessDetails[i].name + " </a><br><a href='#' data-role='button' id='' name='" + i + "' data-icon = arrow-r></a>";

Спасибо.