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)

рони 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>


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