Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jquery text() только первых элементов дерева ul (https://javascript.ru/forum/jquery/72954-jquery-text-tolko-pervykh-ehlementov-dereva-ul.html)

nikolaichIl 09.03.2018 23:58
jquery text() только первых элементов дерева ul
 
имеем простой код

<ul>
  <li>Folder 1
    <ul>
      <li>Sub Item 1.1</li>
      <li>Sub Item 1.2</li>
      <li>Sub Item 1.3</li>
      <li>Sub Item 1.4</li>
    </ul>
  </li>
<ul>


query text() для первого элемента <li> возвращает не только - "Folder 1", но и текст дочерних элементов.

Как это избежать ?

рони 10.03.2018 01:26
nikolaichIl,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  alert($("li:first").contents().eq(0).text());
});
  </script>
</head>

<body>
<ul>
  <li>Folder 1
    <ul>
      <li>Sub Item 1.1</li>
      <li>Sub Item 1.2</li>
      <li>Sub Item 1.3</li>
      <li>Sub Item 1.4</li>
    </ul>
  </li>
</ul>


</body>
</html>

nikolaichIl 10.03.2018 01:52
Спасибо !

Atheist 10.03.2018 03:08
Мне кажется
$("li:first").text()
будет вполне достаточно

j0hnik 10.03.2018 03:10
Atheist,
а если взять и проверить?

рони 10.03.2018 03:10
Atheist,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  alert($("li:first").text());
});
  </script>
</head>

<body>
<ul>
  <li>Folder 1
    <ul>
      <li>Sub Item 1.1</li>
      <li>Sub Item 1.2</li>
      <li>Sub Item 1.3</li>
      <li>Sub Item 1.4</li>
    </ul>
  </li>
</ul>


</body>
</html>

Atheist 10.03.2018 03:52
j0hnik,
да, мой косяк, не разобрался и сейчас заодно открыл для себя новые свойства jquery

j0hnik 10.03.2018 04:09
Atheist, наверное все таки методы, a не свойства, исходя из темы.

nikolaichIl 10.03.2018 20:58
Хорошо.
А перечислить только текст дочерних элементов первого уровня через .children() и each(function() и text()
({

})

<ul class = "menu">
  <li>Folder 1
    <ul>
      <li>Sub Item 1.1
        <ul>
          <li>Sub Item 1.1.1</li>
          <li>Sub Item 1.1.2</li>
          <li>Sub Item 1.1.3</li>
          <li>Sub Item 1.1.4</li>
        </ul>
      </li>
      
      <li>Sub Item 1.2</li>
      <li>Sub Item 1.3</li>
      <li>Sub Item 1.4</li>
    </ul>
  </li>
  
    <li>Folder 2
    <ul>
      <li>Sub Item 2.1</li>
      <li>Sub Item 2.2</li>
      <li>Sub Item 2.3</li>
      <li>Sub Item 2.4</li>
    </ul>
  </li>
</ul>

рони 10.03.2018 21:10
nikolaichIl,
???

рони 10.03.2018 21:18
nikolaichIl,
что хотите получить в итоге?

nikolaichIl 10.03.2018 21:19
так, чтобы внутри each(function(index) по очереди появлялись сообщения - "Folder 1", "Folder 2"

рони 10.03.2018 21:21
nikolaichIl,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var text = $.map($("ul").parent(".menu > li"), function(li) {
   return li.firstChild.textContent.trim()
});
alert(JSON.stringify(text));
});
  </script>
</head>

<body>
<ul class = "menu">
  <li>Folder 1
    <ul>
      <li>Sub Item 1.1
        <ul>
          <li>Sub Item 1.1.1</li>
          <li>Sub Item 1.1.2</li>
          <li>Sub Item 1.1.3</li>
          <li>Sub Item 1.1.4</li>
        </ul>
      </li>

      <li>Sub Item 1.2</li>
      <li>Sub Item 1.3</li>
      <li>Sub Item 1.4</li>
    </ul>
  </li>

    <li>Folder 2
    <ul>
      <li>Sub Item 2.1</li>
      <li>Sub Item 2.2</li>
      <li>Sub Item 2.3</li>
      <li>Sub Item 2.4</li>
    </ul>
  </li>
</ul>


</body>
</html>

рони 10.03.2018 21:24
nikolaichIl,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
 $.each($("ul").parent(".menu > li"), function(i,li) {
   alert(li.firstChild.textContent.trim())
});
});
  </script>
</head>

<body>
<ul class = "menu">
  <li>Folder 1
    <ul>
      <li>Sub Item 1.1
        <ul>
          <li>Sub Item 1.1.1</li>
          <li>Sub Item 1.1.2</li>
          <li>Sub Item 1.1.3</li>
          <li>Sub Item 1.1.4</li>
        </ul>
      </li>

      <li>Sub Item 1.2</li>
      <li>Sub Item 1.3</li>
      <li>Sub Item 1.4</li>
    </ul>
  </li>

    <li>Folder 2
    <ul>
      <li>Sub Item 2.1</li>
      <li>Sub Item 2.2</li>
      <li>Sub Item 2.3</li>
      <li>Sub Item 2.4</li>
    </ul>
  </li>
</ul>


</body>
</html>

nikolaichIl 10.03.2018 21:24
так, чтобы внутри each(function(index) по очереди появлялись сообщения - "Folder 1", "Folder 2"

nikolaichIl 10.03.2018 21:26
да - да
Спасибо.

nikolaichIl 11.03.2018 21:57
А вот такой код
и, чтобы внутри each(function(index) по очереди появлялись сообщения - "Item 1", "Item 2", "Folder 1", "Item 3", "Folder 2", "Item 4", т.е. текст li 1 уровня

<div class="menu">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    
    <li><a href="#">Folder 1</a>
      <ul>
        <li><a href="#">Sub Item 1.1</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
        <li><a href="#">Sub Item 1.3</a></li>
        <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    
    <li><a href="#">Item 3</a></li>
    
    <li><a href="#">Folder 2</a>
      <ul>
        <li><a href="#">Sub Item 2.1</a></li>
        
        <li><a href="#">Folder 2.1</a>
          <ul>
            <li><a href="#">Sub Item 2.1.1</a></li>
            <li><a href="#">Sub Item 2.1.2</a></li>
            
            <li><a href="#">Folder 3.1.1</a>
              <ul>
                <li><a href="#">Sub Item 3.1.1.1</a></li>
                <li><a href="#">Sub Item 3.1.1.2</a></li>
                <li><a href="#">Sub Item 3.1.1.3</a></li>
                <li><a href="#">Sub Item 3.1.1.4</a></li>
                <li><a href="#">Sub Item 3.1.1.5</a></li>
              </ul>
            </li>
            
            <li><a href="#">Sub Item 2.1.4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    
    <li><a href="#">Item 4</a></li>
  </ul>

</div>

рони 11.03.2018 22:11
nikolaichIl,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$.each($(".menu > ul > li > a"), function(i,li) {
   alert(li.firstChild.textContent.trim())
});
});
  </script>
</head>

<body>
<div class="menu">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>

    <li><a href="#">Folder 1</a>
      <ul>
        <li><a href="#">Sub Item 1.1</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
        <li><a href="#">Sub Item 1.3</a></li>
        <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>

    <li><a href="#">Item 3</a></li>

    <li><a href="#">Folder 2</a>
      <ul>
        <li><a href="#">Sub Item 2.1</a></li>

        <li><a href="#">Folder 2.1</a>
          <ul>
            <li><a href="#">Sub Item 2.1.1</a></li>
            <li><a href="#">Sub Item 2.1.2</a></li>

            <li><a href="#">Folder 3.1.1</a>
              <ul>
                <li><a href="#">Sub Item 3.1.1.1</a></li>
                <li><a href="#">Sub Item 3.1.1.2</a></li>
                <li><a href="#">Sub Item 3.1.1.3</a></li>
                <li><a href="#">Sub Item 3.1.1.4</a></li>
                <li><a href="#">Sub Item 3.1.1.5</a></li>
              </ul>
            </li>

            <li><a href="#">Sub Item 2.1.4</a></li>
          </ul>
        </li>
      </ul>
    </li>

    <li><a href="#">Item 4</a></li>
  </ul>

</div>



</body>
</html>

nikolaichIl 11.03.2018 22:36
Спасибо !

рони 11.03.2018 22:40
Цитата:
Сообщение от nikolaichIl
по очереди появлялись сообщения - "Item 1", "Item 2", "Folder 1", "Item 3", "Folder 2", "Item 4",
 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$(".menu > ul > li > a").text(function(i,text) {
   alert(text)
});
});
  </script>
</head>

<body>
<div class="menu">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>

    <li><a href="#">Folder 1</a>
      <ul>
        <li><a href="#">Sub Item 1.1</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
        <li><a href="#">Sub Item 1.3</a></li>
        <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>

    <li><a href="#">Item 3</a></li>

    <li><a href="#">Folder 2</a>
      <ul>
        <li><a href="#">Sub Item 2.1</a></li>

        <li><a href="#">Folder 2.1</a>
          <ul>
            <li><a href="#">Sub Item 2.1.1</a></li>
            <li><a href="#">Sub Item 2.1.2</a></li>

            <li><a href="#">Folder 3.1.1</a>
              <ul>
                <li><a href="#">Sub Item 3.1.1.1</a></li>
                <li><a href="#">Sub Item 3.1.1.2</a></li>
                <li><a href="#">Sub Item 3.1.1.3</a></li>
                <li><a href="#">Sub Item 3.1.1.4</a></li>
                <li><a href="#">Sub Item 3.1.1.5</a></li>
              </ul>
            </li>

            <li><a href="#">Sub Item 2.1.4</a></li>
          </ul>
        </li>
      </ul>
    </li>

    <li><a href="#">Item 4</a></li>
  </ul>

</div>



</body>
</html>

nikolaichIl 11.03.2018 22:55
Спасибо !

nikolaichIl 13.03.2018 05:50
Спасибо !


Часовой пояс GMT +3, время: 08:35.