简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js Comment obtenir uniquement la valeur de l'élément parent au lieu de la valeur de l'élément enfant en même temps?
黄舟
黄舟 2017-06-26 10:50:49
0
10
736
<p class="mui-media-body js-media-body js-anviz-body">Trouble Ticket
    <p class="anviz-ellipsis js-des">You can sumbit your trouble and …</p>
</p>

Comment écrire juste pour obtenir un Trouble Ticket ? Merci

黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

répondre à tous(10)
某草草
某草草2017-06-26 10:52:49 10 plancher

Il est préférable d'ajouter une étiquette pour l'emballer pour un accès facile

Comme +0
Ajouter une réponse
洪涛
洪涛2017-06-26 10:52:49 9 plancher 
var val = jQuery(this).find('.js-anviz-body')[0].firstChild.data;

D'accord！

Comme +0
Ajouter une réponse
習慣沉默
習慣沉默2017-06-26 10:52:49 8 plancher

Clonez d'abord l'élément, puis supprimez les éléments enfants et enfin obtenez le texte sans éléments enfants

jQuery('.js-anviz-body').clone().children().remove().end().text()
Comme +0
Ajouter une réponse
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-26 10:52:49 7 plancher 
document.querySelector('.mui-media-body').firstChild.nodeValue
Comme +0
Ajouter une réponse
我想大声告诉你
我想大声告诉你2017-06-26 10:52:49 6 plancher

J'ai déjà répondu à une question similaire. Lors de la traversée de nodeChild, ce texte est une instance de Text() Vous pouvez vous référer à la question à laquelle j'ai répondu auparavant : /q/10...

.
Comme +0
Ajouter une réponse
过去多啦不再A梦
过去多啦不再A梦2017-06-26 10:52:49 5 plancher

Il est plus raisonnable d'ajouter une travée pour le couvrir

Comme +0
Ajouter une réponse
大家讲道理
大家讲道理2017-06-26 10:52:49 4 plancher 
<html>
    <head>
        <title></title>
        <style type="text/css">
            .parent{
                width:100px;
                height:100px;
            }
            .child{
                width:100px;
                height:50px;
            }
        </style>
    </head>
    <body>
        <p class="parent">
            hello world,
            <p class="child">welcome!</p>
        </p>
        <script>
            var text = document.querySelector('.parent').firstChild.nodeValue;
            console.log(text);
        </script>
    </body>
</html>

Comme +0
Ajouter une réponse
曾经蜡笔没有小新
曾经蜡笔没有小新2017-06-26 10:52:49 3 plancher

Pour comprendre la question, vous souhaitez probablement obtenir tout le texte qui appartient à l'élément parent mais n'appartient pas à l'élément enfant

  • En supposant que vous connaissez la position du texte, c'est plus simple, si le texte est au début : 

//pp = """<p class="mui-media-body js-media-body js-anviz-body">Trouble Ticket
    <p class="anviz-ellipsis js-des">You can sumbit your trouble and …</p>
</p>"""
var childNodes = pp.childNodes;
var text = childNodes[0]; // Trouble Ticket

  • Si la position du texte est incertaine, voire s'il y en a plusieurs, alors il faut parcourir les éléments enfants de l'élément parent et trouver tous les éléments dont les attributs de nœud sont du texte : 

//pp = """<p class="mui-media-body js-media-body js-anviz-body">
    Trouble Ticket
    <p class="anviz-ellipsis js-des">You can sumbit your trouble and …</p>
    Trouble Ticket2
</p>"""
var childNodes = pp.childNodes;
var textNodes = [];
childNodes.forEach(function(node){
    if (node.nodeType === 3) {
        textNodes.push(node);
    } // 3 为 文本
});
//textNodes === ['Trouble Ticket', 'Trouble Ticket2']
Comme +0
Ajouter une réponse
ringa_lee
ringa_lee2017-06-26 10:52:49 2 plancher

La méthode de clonage ci-dessus est meilleure. Que se passe-t-il s'il y a du texte derrière la balise p ?
L'utilisation de firstChild n'obtient que le premier nœud de texte, et il doit être parcouru pour obtenir les nœuds de texte suivants.

Comme +0
Ajouter une réponse
大家讲道理
大家讲道理2017-06-26 10:52:49 1 plancher 
var content = $('.anviz-ellipsis').parent().html().replace(/<[\s\S]*>/g, '');
    console.log(content);
打印结果：
// Trouble Ticket

Code HTML : 

    <p class="mui-media-body js-media-body js-anviz-body">Trouble Ticket 
        <p class="anviz-ellipsis js-des">
            You can sumbit your trouble and …
            <!-- 混淆代码1 start-->
            <p>sdkfjfjfdlkfjsld</p>
                <a href="">3w33333</a>
            <!-- 混淆代码1 end-->
        </p>
             <!-- 混淆代码2 start-->
            <img src="" alt="">
            <a href="">sdfsjflsjdflskdjf</a>
            <p>
            </p>
             <!-- 混淆代码2 end-->
    </p>

code js : 


    <script>
        var content = $('.anviz-ellipsis').parent().html().replace(/<[\s\S]*>/g, '');
        console.log(content);
    </script>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！