Используйте JQuery для нацеливания развернутого текста внутри div - PullRequest
Новая
       18

Используйте JQuery для нацеливания развернутого текста внутри div

2 голосов
/ 17 марта 2012

Я пытаюсь найти способ обернуть только внутренний текст элемента, я не хочу предназначаться для любых других внутренних элементов dom.Например. 

<ul>
  <li class="this-one"> 
  this is my item
   <ul>
    <li>
       this is a sub element
    </li>
   </ul>
  </li>
</ul>

Я хочу использовать jQuery для этого. 

<ul>
   <li class="this-one"> 
       <div class="tree-item-text">this is my item</div>
       <ul>
        <li>
           <div class="tree-item-text">this is a sub element</div>
        </li>
       </ul>
      </li>
    </ul>

Небольшой фон - мне нужно создать собственный элемент пользовательского интерфейса в виде древовидной структуры, поэтому я 'м, используя структуру UL, чтобы представить это.Но я не хочу, чтобы разработчикам приходилось делать какое-либо специальное форматирование для использования виджета.

update: я просто хотел добавить цель этого, я хочу добавить прослушиватель щелчков, чтобы иметь возможность расширятьэлементы под li, однако, поскольку эти элементы находятся внутри li, прослушиватель щелчков будет активирован даже при нажатии на дочерние элементы, поэтому вместо этого я хочу прикрепить его к тексту, для этого текст должен быть нацеленным, поэтомуЯ хочу обернуть это в свой собственный div.

До сих пор я придумал оборачивать все внутренние элементы li в div и затем перемещать все внутренние элементы dom обратно к исходному родителю.Но этот код довольно тяжел для чего-то, что может быть намного проще и не требует больших манипуляций с DOM.

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

var innerTextThing = $("ul.tree ul").parents("li").wrapInner("<div class='tree-node-text'>");

$(innerTextThing.find(".tree-node-text")).each(function(){
   $(this).after($(this).children("ul"));
});

Ответ: Я закончил тем, что сделал следующее, к вашему сведению, мне остается только беспокоиться о совместимости с FF и IE, поэтому он не тестировался в других браузерах. 

    //this will wrap all li textNodes in a div so we can target them.
    $(that).find("li").contents()
      .filter(function () {
          return this.nodeType == 3;
      }).each(function () {
          if (
          //these are for IE and FF compatibility
                (this.textContent != undefined && this.textContent.trim() != "")
                ||
                (this.innerText != undefined && this.innerText.trim() != "")
              ) {
              $(this).wrap("<div class='tree-node-text'>");
          }
      });

Ответы [ 3 ]

5 голосов
/ 17 марта 2012

Использование wrapInner(): 

​$('li').wrapInner('<div class="tree-item-text" />');​

JS Fiddle demo .

<ч />

Отредактировано для решения проблемы, поднятой ФП, в комментариях ниже:

wrap inner обернет все элементы внутри li с помощью div, я просто хочу нацелить текст.

Этот исправленный код должен переноситься только textNode s: 

$('li').each(
    function(){
        var kids = this.childNodes;
        for (var i=0,len=kids.length;i<len;i++){
            if (kids[i].nodeName == '#text'){
                $(kids[i]).wrap('<div class="tree-item-text" />');
            }
        }
    });​

JS Fiddle demo .

Ссылки:

3 голосов
/ 17 марта 2012

Если вам нужны дополнительные опции, вот вопрос с несколькими другими способами поиска текстовых узлов: Как выбрать текстовые узлы с помощью jQuery?

1 голос
/ 17 марта 2012

Как насчет использования некоторых регулярных выражений?Предположим, у вашего корня UL есть идентификатор myTree, тогда: 

// Get all the HTML inside the UL.
var html = $("#myTree").html();  
// Wrap all text nodes with DIVs.
html = html.replace(/>([^<]+)</gi, "><div class='tree-item.text'>$1</div>");  
// Put it back.
$("#myTree").html(html);
...