JQuery - получите первое вхождение класса в любую точку DOM - PullRequest
Новая
       5

JQuery - получите первое вхождение класса в любую точку DOM

0 голосов
/ 16 октября 2019

У меня есть несколько экземпляров class = "reply_count", большинство из которых встроены в другие элементы. Я хотел бы, чтобы метод проходил вверх в любом месте DOM, чтобы получить первый экземпляр и получить текстовое значение.

В приведенном ниже примере я попытался использовать prevAll и получить первый из них. Тем не менее, он не распознает тот, который находится в DIV. Это тот, который я хочу выбрать. Я предполагаю, что prevAll работает для тех же элементов уровня, но не для вложенных?

Мой настоящий код намного сложнее, но ниже приведен лишь простой пример намерения.

Какой другой методдоступа к первому появлению класса, идущего вверх, независимо от того, где он находится и как он вложен в другие элементы? 

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="reply_count">15</div>
        <div class="reply_count">10</div>
        <div><span class="reply_count">5</span></div>        
        <div id="click" style="cursor: pointer;">Click Here</div>
        <div class="reply_count">2</div>
        <div class="reply_count">1</div>
        <script>
            $("#click").click(function(){
                value = $(this).prevAll( ".reply_count:first" ).text();
                alert(value);
            });
        </script>  
</body>    
</html>

Результат: 10. Я хотел 5.

Ответы [ 3 ]

1 голос
/ 16 октября 2019

Вы можете сделать что-то вроде этого: 

$(".click").click(function() {
  var c = $(this).parent().find(".reply_count").add(this);
  var t = $(c).index(this);
  var value = $(c).eq((t-1)).text();
  console.log(value);
});

Демо Я добавил несколько <div class="click", чтобы вы могли видеть, что это работает просто отлично. 

$(".click").click(function() {
  var c = $(this).parent().find(".reply_count").add(this);
  var t = $(c).index(this);
  var value = $(c).eq((t-1)).text();
  console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reply_count">15</div>
<div class="reply_count">10</div>
<div>4</div>
<div class="click" style="cursor: pointer;">Click Here</div>
<div><span class="reply_count">5</span></div>
<div class="click" style="cursor: pointer;">Click Here</div>
<div><span class="reply_count">1</span></div>
0 голосов
/ 16 октября 2019

вы можете использовать ближайший метод. Он проходит вверх через предков в дереве DOM и возвращает ближайшего родителя, соответствующего вашему селектору

0 голосов
/ 16 октября 2019

Вы можете попробовать это без необходимости JQuery: 

document.addEventListener("click", evt => {
    // event delegation: if not the right element, do nothing
    if (!(evt.target.dataset.findcount)) { return; }
    // find all .reply_count from the parent
    // (convert to Array to be able to use 'filter')
    const prev = Array.from(
       evt.target.parentNode.querySelectorAll(".reply_count, [data-findcount]"));
    // find element where next element is the clicked one
    const prevCount = prev.filter( (el, i) => 
      prev[i+1] === evt.target || null);
    // show textContent if element is found
    console.clear();
    console.log(prevCount.length &&
      prevCount[0].textContent || 
      "no previous count element");
});
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div data-findcount=1 style="cursor: pointer;"> Click Here</div>
        <div class="reply_count">15</div>
        <div class="reply_count">10</div>
        <div><span class="reply_count">5</span></div>        
        <div data-findcount=1 style="cursor: pointer;">Click Here</div>
        <div class="reply_count">2</div>
        <div class="reply_count">1</div>
        <div>25</div>
        <div data-findcount=1 style="cursor: pointer;"> Click Here</div>
</body>    
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...